[Resolved] Margin around post columns

Home Forums Support Margin around post columns

  • This topic has 5 replies, 2 voices, and was last updated 12 months ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    #1012177
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1013099
    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!

    #1013771
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1014007
    Amiria

    Oh, of course! Thank you!

    #1014083
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.