Archived topic

Blog: Horizontal space using Container > Content Separator

5 replies · Started by Giselle on January 24, 2022

Viewing posts 1–6 of 6

January 24, 2022 at 5:27 am #2091596

Hi,

I've set the spacing (horizontal and vertical) in my Blog sections using Customise > Layout > Container > Content Separator.

I'd like to increase the vertical, but not the horizontal space. I'd also like to remove the margin on the bottom row of posts. I've tried various solutions setting the margin of the last-child to 0, but this adds a space under the title of the last blog post (where it has a longer title).

To sum up:
- How can I increase the vertical space only.
- I don't want the last row of posts to have an extra bottom margin - 42 pixels at the moment, set in content Separator.
- I don't want the space under the blog title to increase.

I've added a link below.

Thanks for your help,

Giselle

January 24, 2022 at 6:33 am #2091665

Hi there,

can you reshare the link as it did not come through in your original topic.

January 24, 2022 at 6:34 am #2091666

Hi David, Added below.

Thanks.

January 24, 2022 at 7:23 am #2091724

Ok so this CSS to increase vertical gap between posts:

.generate-columns-container .generate-columns {
    margin-bottom: 60px;
}

But adjusting that gap for the bottom row is not something CSS can easily do, especially as the number of post displayed the will vary. So instead the alternative is to leave the margin in place and remove/reduce the containers bottom padding:

body:not(.single):not(.page) .site-content {
    padding-bottom: 0;
}

January 24, 2022 at 7:39 am #2091744

Thank you, David. All working!

January 24, 2022 at 8:15 am #2091960

Glad to hear that

This archived topic is closed to new replies.

Start building better websites today.