Responsive layout breaking

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.

Not sure what I am doing wrong here. Can someone help please?

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;

1 Like

@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]

Should I still include vertical-align?

When I was testing the suggestion, I commented out {float:left} in this selector
wp-content/themes/cookd-1.0.1/style.css?ver=1.0.1 (line 862)

.five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds {
/*    float: left; */
    margin-left: 2.5641%;
}

and added this in its place

{display:inline-block; vertical-align:top;}

You will have to test your full page and see if changing only .four-sixths is adequate. I did not test other combinations.

Yes, vertical-align:top (or something other than baseline) should usually be used with display:inline boxes.

1 Like

Thanks again @ronpat :smile:

1 Like

You’re welcome,@yathrakaaran

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.