Mike Mike - 1 month ago 7
CSS Question

Having trouble displaying images in one row/two rows using media queries

I want have a responsive page whereby if the screen is large enough, my login images are displayed on one line, otherwise, they are displayed across two lines. So I have this HTML

<div id="loginBox">
<div>Login/Sign Up</div>
<div id="loginLogos">
<div id="row1">
<a href="/auth/google"><img border="0" alt="Google" src="http://www.racertracks.com/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"></a>
<a href="/auth/facebook"><img border="0" alt="Facebook" src="http://www.racertracks.com/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"></a>
</div>
<div id="row2">
<a href="/auth/twitter"><img border="0" alt="Twitter" src="http://www.racertracks.com/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"></a>
<a href="/auth/linkedin"><img border="0" alt="LinkedIn" src="http://www.racertracks.com/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png"></a>
</div>
</div>
</div>


and then I used the media-query to attempt to do what I wanted …

#one {
float:left;
}

@media screen and (max-width: 400px) {
#one {
float: none;
}
}


However, at a normal screen size, the images are falling into two rows instead of one — https://jsfiddle.net/ocdz4bsp/ . For small screens, they are correctly wrapping into two rows. How do I keep everything on one line for screen sizes over 400 pixels?

Answer

You really don't need any media queries to achieve the effect you're after. By using floats properly, the items will stack themselves when need be. See here

#row1, #row2 {
    float:left;
}

#row1 {
  margin-right: 5px;
}

If you were set on @media queries, then you could do the following:

#row1, #row2 {
    float:left;
}

#row1 {
  margin-right: 5px;
}

@media only screen and (max-width: 400px) {
    #row1, #row2 {
        float: none;
        margin-right: none;
    }
}
Comments