November 2017
M T W T F S S
« Dec    
 12345
6789101112
13141516171819
20212223242526
27282930  
BC Website Designer Canada - Freelance Web Development, Vancouver, BC - 778-848-7950

A Simple Fix for WP Responsive Grid

This plugin is great, it styles your Native WordPress Gallery as a google styled responsive grid… I love it, I use it a lot, but it has one issue that has to be worked around in many themes. It picks up the CSS margin styling of the theme it is running in.

What needs to be done is a simple tweak to your theme’s CSS.

Embed an image on a wordpress page. Right click that image and open the inspector. Find your root elements using the inspector built into firefox or chrome, in many CSS files this is #main or something similar.

We will refer to this base element (which is the sheet’s overall width) as .main_width

the rule then should look like this:

.main_width img{margin:0 !important;}

Alternatively, you could put the gallery in an identified div, such as #Gridfix and add this to your gallery post:

<div id=”Gridfix”>[gallery]</div>

and this to your CSS file:

#Gridfix img {margin:0 !important;}

hopefully this will help a few people searching for the reason why their grid looks all messed up 😀 Happy Coding!