Hi Everyone, I am working on a recipe blog. The Blog But I think I messed something up by adding a media query. At 100% width the four images of featured posts shows up on the top and at 50% width would like two images to show on top and two images below that.
So I added a media query @media only screen and (max-width: 850px) {.five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds, .first { clear: none; margin-left: 2%; width: 45%; } }
Initially this works but when the screen size reduced to 690px the image formation breaks. And it shows up as the screenshot attached. I played around with adjusting the width but this doesn’t seem to affect the problem. The images are stuck at this state but it appears as if they are flickering because they are breaking formation at various screen widths.
Floats can do that if the heights of the boxes are not always exactly the same. Because your boxes are being resized continuously as the page width changes, their heights may differe by a pixel or two. Have you tried setting the articles to inline-block instead of floating them?
EDIT: if you try display:inline-block also include vertical-align:top;
@ronpat thank you very much. Yes [quote=“ronpat, post:2, topic:254206”]
inline-block
[/quote]
did the trick! I applied it on .one-fourth and it works perfect. It worked without [quote=“ronpat, post:2, topic:254206”]
vertical-align:top;
[/quote]