- This topic has 5 replies, 2 voices, and was last updated 3 years, 4 months ago by
Tom.
-
AuthorPosts
-
September 17, 2019 at 4:42 pm #1012078
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!
September 17, 2019 at 8:30 pm #1012177Tom
Lead DeveloperLead DeveloperHi 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-developmentSeptember 18, 2019 at 4:40 pm #1013099Amiria
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!
September 19, 2019 at 9:53 am #1013771Tom
Lead DeveloperLead DeveloperTry 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-developmentSeptember 19, 2019 at 3:22 pm #1014007Amiria
Oh, of course! Thank you!
September 19, 2019 at 6:46 pm #1014083Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.