Margin around post columns

[Amiria]

Hi there,

I love your theme, and have used it for some time. At the moment I am attempting to create something along the lines of this: https://familypets.nz/wp-content/uploads/2019/09/website-layout.jpg

My question relates to the black border shown above and below the featured column, as well as the spacing between the columns below.

At the moment I have added this:

.featured-column {
width: 100%;
border-top-style: solid;
border-top-color: #000000;
border-top-width: 5px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-bottom-width: 5px;
margin-bottom: 50px;
margin-top: 10px;
}

My current problem is how to add a space between the columns below, without this moving the black border lines out of position (for example, when I add padding, this makes the black border line extend beyond the edge of the image). I am guessing that I need to add a margin, rather than padding, to both the featured post, and the columns below, is that correct? Could you please let me know how to do this?

Thank you!

[Tom]

Hi there,

I would add padding using the Customizer, then change your border/width CSS to this:

.featured-column {
    width: 100%;
}

.featured-column .inside-article {
    border-top-style: solid;
    border-top-color: #000000;
    border-top-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    border-bottom-width: 5px;
    margin-bottom: 50px;
    margin-top: 10px;
}

That should fix it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Amiria]

Thank you so much, Tom. That worked perfectly.

I have one final question regarding the top black border line above the featured column. It looks great on desktop, but at small screen sizes this border jumps upwards a little.

Is there an easy way to ensure that it remains sitting along the top edge of the image at all screen sizes?

Thank you!

[Tom]

Try adjusting the mobile content padding – it’s set to 30px all the way around right now. On desktop, you have the top set to 0.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Amiria]

Oh, of course! Thank you!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts