[Resolved] Add spacing between “recent posts” widget in sidebar

[Justin]

Hey there. I’m trying to add a bit of space between my recent posts lists in my sidebar. I’ve added a bit of CSS to resolve the issue and it worked but not for every item in the list.

For the first 4 items, the added padding is there and looks how I want it to. However, the spacing between the fourth and fifth item seems unaffected by the additional CSS.

This is the CSS I added:

.sidebar .widget ul li {
padding-bottom: 30px;
}

Also, this is only occurring on desktop. On mobile, its looks as it should.

Any thoughts?

[David]

Hi there,

can you share a link to the page where i can see this?

[Justin]

Sure thing:

https://allaboutaircompressors.com/3-air-compressor-oil-substitutions-heres-what-you-can-use/

[David]

Did you resolve the issue? They look correct to me:

https://www.screencast.com/t/87FBolODZd

[Justin]

Here is what it looks like on my end. In the provided pic, you can see that the titles of the last two posts only take up two lines whereas in the pic you provided they take up three. That being said, I think the extra padding is there but because of how its displaying on my browser, the last post thumbnail isn’t spaced out like the other ones. Is there a way to fix the amount of spacing between the thumbnails or do you have another recommendation?

https://allaboutaircompressors.com/wp-content/uploads/2021/11/Sidebar-Widget.jpg

[David]

Try adding margin to the image instead:

.wp-block-latest-posts__featured-image img {
    margin-bottom: 30px !important;
}

[Justin]

Hey David, that did the trick. Thanks so much for your help!

[David]

You’re welcome

[Author]

Posts