Archived topic
Three column blog page has no side margins?
11 replies · Started by Bandara on April 24, 2021
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.
Hi there,
can you share a link to the blog where i can see the issue?
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.
Hi Bandara,
You can add some paddings to the container at Customizing > Layout > Container.
Let me know :)
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.
Hi there,
You could try this:
.generate-columns-container {
padding: 1em;
}Let us know :)
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.
Hi there,
Let's try selecting the parent of the masonry columns.
Can you try this?
body.archive main#main {
padding: 0px 1em;
}[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?
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 :)
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.
Yes, it's confusing sometimes :)
Glad to be helpful!
