Site logo

Archived topic

Reduce Featured Image Bottom Margin on Archive Page

7 replies · Started by Bhadrajith on August 2, 2018

Viewing posts 1–8 of 8

How to reduce the bottom margin of featured image on the archive page?

Hi there

you can use this CSS:

.archive .inside-article .post-image, .blog .inside-article .post-image {
    bottom-margin: 1em;
}

Thanks David.
But the code did not work for me.
However, following works. I have align the images to the left and redced the size. (The code does not work when there is a space after the ".blog" or ".archive". Is this follow the correct procedure?

.archive.post-image-aligned-left .inside-article .post-image,
.blog.post-image-aligned-left .inside-article .post-image,
.search.post-image-aligned-left .inside-article .post-image {
    margin-bottom: 0.5em;
}

Hi there, thats fine, the first two classes are body classes so exist on the same element so correct to have no space between them

Hi,

Same issue here.
For some reason I see a small bottom margin below the featured image at the blog page, which is not the case below the featured image of a single blog post or a regular page.

The code provided by David has a small typo, and therefore doesn't work. It contains bottom-margin instead of margin-bottom. Correcting this, the following code works for me (with a font size of 19px, I need a negative bottom margin of 8.5px which is 0.447em):

.archive .inside-article .post-image, .blog .inside-article .post-image {
    margin-bottom: -0.447em!important;
}

However, wondering where this small margin comes from, and why it's not there at single blog posts or regular pages?

Site: https://dev.matjoo-digitaallab-kunstgalerie.nl/blog/

Actually it's caused by the featured image, that should be 720x240px. But because at the archive page the image becomes a link, it seems it gets another 8px extra at the bottom for some reason.

So better should be to target the image, I guess. But don't know how to prevent an extra 8px height. May be the 8px might be 10px with bigger featured images, who knows...

Yeah, so in my case, this works too:

.archive .inside-article .post-image, 
.blog .inside-article .post-image {
max-height:240px;
}

But that's not very... well, eh: clean coded...

Hi there,

Does this do anything?:

.post-image img {
    vertical-align: middle;
}
This archived topic is closed to new replies.