NeoSketo NeoSketo - 7 months ago 16
HTML Question

how to make img-list stay on one line in desktop but drop down on mobile devices

I am having some trouble making a responsive list of images. My objectives is:


  1. On desktop resolutions
    1000px
    and greater:


    • I need one line of images that never wraps and images always fit. I
      can accomplish that with this:




HTML

<div id="partners" class="col-md-6">
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
</div>


CSS

#partners {
background-color: #eee;
white-space: nowrap;
width: 100%;
display: table;
}

.logo-image {
vertical-align: middle;
display: table-cell;
border: solid 1px #F00;
}

.logo-image img {
max-width: 100%;
}
@media (min-width:1000px) {
#partners {

}

.logo-image {

}
}



  1. On smaller screens:


    • the blocks drop down (responsive)




But as users access this page on mobile devices those blocks get smaller. So I tried to make the image retain normal size then drop down by removing the partners css when the screen
width
is anything less than
1000px
but that doesnt seem to work.

@media (max-width:1000px) {
#partners {

}

.logo-image {

}
}


here is my fiddle

I've been trying all week so far and at wits end, at this point I'm not sure it can be done.

Answer

You can simply make the display: block; to remove the inline display.

Check the updated code here:

#partners {
  background-color: #eee;
  white-space: nowrap;
  width: 100%;
  display: table;
}

.logo-image {
  vertical-align: middle;
  display: table-cell;
  border: solid 1px #F00;
}

.logo-image img {
  max-width: 100%;
}
@media (max-width:1000px) {
#partners {
 
}

.logo-image {
float:left;
}
}
  <div id="partners" class="col-md-6">
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
  </div>

Comments