[Resolved] Distance Headline / featured image

[Bert]

Hi Tom,
hi Leo,

since a couple of days I am trying to lower the distance between the featured images on the frontpage (separate containers, no masonry) and the headline of the article. Can’t figure it out 😉

Also I dind’t find any suggestion in the forum, so I thought I ask you guys.

I am sure for you it’s a simple thing, right?

Thanks
Bert

[Leo]

Hi there,

Assuming your featured image is on top of the post title, try this CSS:

.post-image-above-header .inside-article .post-image, 
.post-image-above-header .inside-article .featured-image {
    margin-bottom: 1em;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Can you link me to the site if it doesn’t work?

[Bert]

Thank you Leo,

but that was not working.

I did a screenshot for you so that you can see what my challange looks like:

So here is the Frontpage of an website with all the new articles:

View post on imgur.com

You can see the huge space beween the headline and the featured image.

What I try is to make it look like this:

View post on imgur.com

As I mentioned the frontpage has separate containers and no masonry.

Any idea?

Thanks Leo

[Tom]

Did you adjust the 1em value to something smaller? If so, can you link us to the page so we can take a look?

[Bert]

Thank you Tom.

Yes, I even tried 10px and 0px but it made no difference.

I am going to send you the url by mail.

Cheers,
Bert

[Leo]

You can edit the original post and use the private URL field that only Tom and myself can see.

[Leo]

My CSS above should work but I don’t see them being added.

Maybe try clearing WP Super Cache.

[Bert]

Thanks Leo,

I just edited the url field and saw that the url was already included?

Anyway, now it is available.

Cheers,
bert

[Leo]

Yup I added it in 🙂

See my answer above: https://generatepress.com/forums/topic/distance-headline-featured-image/#post-451806

[Bert]

Hi Leo,

so I included the this lines into my styles.css

.post-image-above-header .inside-article .post-image, 
.post-image-above-header .inside-article .featured-image {
    margin-bottom: 1px;
}

I cleared wp cache and now look for your self…

Hmm…

[Leo]

Now I see it but it’s being overwritten.

Try this instead:

body.post-image-above-header .inside-article .post-image, 
body.post-image-above-header .inside-article .featured-image {
    margin-bottom: 1px;
}

[Bert]

What can I say….

THANK’s A MILLION!!!

This snippet worked perfectly :))

Thank you very much Leo for helping me out

[Leo]

No problem!

[Author]

Posts