How to Increase Margin Between Grids

Greetings!

….and not to worry about being new to WordPress. I’m here to help!

This is untested, so hopefully this will work for you, but to add more space between the grid layout for the thumbnails, you will need to add some custom CSS to your site (not as scary as it sounds). You mentioned you are using Jetpack, so that is what we can use to add some custom CSS. In the settings for Jetpack, there is a Custom CSS edit feature; turn that to on.

The space that you get (or seen on the live demo site) is actually a border which is done from this:

.image-post .hentry {
    max-width: 100%;
    float: left;
    margin: 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}

So for you, the best method is to increase the border thickness (represented by the 1px you see in the code). So we can make it 5px to give it an appearance of being actual space by adding this custom CSS code to your Edit CSS (from jetpack which adds this to the admin panel “Appearance”).

.image-post .hentry {
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
}

Quick Note: I would recommend to not make the border (space) too large.

• This reply was modified 9 years, 4 months ago by Shaped Pixels.