[Support request] Three column blog page has no side margins?

[Bandara]

Hello!

My three column blog page doesn’t have any side margins. I can change this with custom css

body.archive article{
	margin:auto 1em;
}

But I’m wondering if there is something I should be doing in the customizer interface. BTW, I’m on a relatively small laptop, so even on regular pages I don’t see much of a margin. But on the blog archive there is zero.

I’m only asking since it makes sense to stick to the settings in the gui first.

[David]

Hi there,

can you share a link to the blog where i can see the issue?

[Bandara]

Sure! Sorry I didn’t do that.

My fix that I posted above actually broke the page (don’t know why I didn’t see that before I posted). So I have removed that css.

[Ying]

Hi Bandara,

You can add some paddings to the container at Customizing > Layout > Container.

Let me know 🙂

[Bandara]

That doesn’t do it. Please see screenshot to see in customizer where I think you are telling me to go. It already has padding there but no effect.

[Tom]

Hi there,

You could try this:

.generate-columns-container {
    padding: 1em;
}

Let us know 🙂

[Bandara]

Hmm. This causes a similar problem to my original code.

When I add this it does indeed put padding. However the three and two columns switch to a single column.

[Elvin]

Hi there,

Let’s try selecting the parent of the masonry columns.

Can you try this?

body.archive main#main {
    padding: 0px 1em;
}

[Bandara]

[sorry, somehow my previous post got erased]

That did it! Thanks.

I have a possibly related question. I’m trying to reduce the padding around the text inside the items as well. When I add this code

div.inside-article {
	padding:1em!important
}

The padding does reduce as I want, but then the featured images go outside the boundary. Strange. Any ideas?

[Ying]

The padding you set in customizer is 40px lef/right, and you set no padding around the featured image. In order to achieve that, the image was given a -40px margin left/right.

The CSS you added reduces the padding around the content to 1em, but the -40px featured image margin left/right still there, that’s why it goes out of the boundary.

To fix that, you could go to customize > layout > blog, and tick the “Display padding around images” box.
https://www.screencast.com/t/Ly5V1FY55o

Another option is to add this CSS, the value should always match with the padding set for inside-article.

.no-featured-image-padding .inside-article .post-image {
    margin-left: -1em;
    margin-right: -1em;
}

Let me know 🙂

[Bandara]

Ahh. I didn’t realize that the layout>container settings applied to the archive items as well. I wonder if that could be made more explicit somehow in the customizer.

I have it all sorted now. Thanks!! So glad to be using GP.

[Ying]

Yes, it’s confusing sometimes 🙂
Glad to be helpful!

[Author]

Posts