Question

I recently downloaded the Gridly wordpress theme (responsive), and used css media queries to tweak the layouts across different widths – 1020px, 610px, 480px, 320px.

See my page here.

The grid rearranges smoothly when i minimise the window from 1020px to 610px and 610px to 480px. The ‘problem’ occurs when i switch from 480px to 320px, as there seems to be an extra space below the featured image thumbnails that pops up which results in a big gap between one post image and the next. This occurs both on the browser on my laptop and on my iPhone when i rotate from landscape to portrait view.

The same problem happens when i switch from 320px to 480px (rotate iPhone from portrait to landscape) only this time the images overlap instead.

Does anyone have any idea what might be causing this?

I’m rather new to media queries, php and customizing wordpress themes in general so i might have missed out some basic coding elements.

Thank you very very much in advance 🙂

Answer 1

the jQuery Masonry plugin, in its effort to reflow things to the skinny window, is adding inline styles to the <div class="post">s. Short of modifying that plugin (or disabling it below a certain screen width), you could hackily override those styles in the appropriate media query. Looks to me like something like this will do the trick:

#post-area .post {
    float: left;
    top: auto ! important;
    display: block;
    position: relative ! important;
}

According to this answer, the Isotope plugin might work better than Masonry for media-queried resizes.