Archived topic
Margin around post columns
5 replies · Started by Amiria on September 17, 2019
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!
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 :)
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!
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 :)
Oh, of course! Thank you!
You're welcome :)
