Weird padding/margin in blog post grid

[beginnersmind]

Hi everyone,

The blog page on my site has an option for a “grid view”, meaning it displays the latest posts with an image and a small excerpt + a “read more” link below. You can see it here (scroll down a little): http://www.irisbarzen.com/

Since I started adding custom CSS to the site it has started looking weird. Initially it used the h5 parameters where the font is way too big now. So I changed the class and gave it a better font-size, line-height and a padding and margin of zero.

The text looks okay now, but it’s still weirdly displayed with way too much space between the excerpt and the link.

Can you help me out? Thanks a lot.

[Paulie_D]

You have these two rules in the CSS

.block-article .read-more {
    margin-top: 3em;
}

article .read-more {
    margin-top: 2em;
}

I’d suggest removing them, or at least making them significantly smaller.

I’d recommend familiarising yourself with the Developer tools that come with your browser so you can review what rules are applying and turn individual properties on and off.

[beginnersmind]

Thanks! I tried changing both margins, but couldn’t see a change. I’m DIYing everything, so I know how to use the inspect element tools, but sometimes I don’t understand what shows up.

[Paulie_D]

Hmmm…works for me.

Before Image:

https://imgur.com/aFw6vCz

After Image:

https://imgur.com/kxMmWFz

[Author]

Posts