Make post image (on card) same width as title and excerpt

Hi there,

you have this CSS:

#wpsp-108.wpsp-card .wpsp-content-wrap {
    padding: 20px;
}

Change that to:

#wpsp-108.wpsp-card .wpsp-content-wrap {
    padding: 20px 0;
}

Then add this CSS to force the images to fill the container:

.wp-show-posts-image img {
    width: 100%;
}

Hi David,

That's strange I can't find that CSS.

This is all the CSS I can see:

@media(max-width:768px){
div#right-sidebar, div#left-sidebar {
display:none;
}
}

.mobile-menu-control-wrapper .menu-toggle {
background-color: #ffffff;
}

div.post-image {
margin-bottom:1em!important;
}

div.entry-summary {
margin-top:1em!important;
}

.generate-columns .inside-article {
overflow: hidden;

}

.generate-columns.resize-featured-image .post-image img {
width: 100%;
}

a.read-more {
display: block;
margin-top: 1em;
text-align: left;
}
@media (max-width: 768px) {
.generate-columns-container .post.generate-columns {
margin-left: 20px;
margin-right: 20px;
}
}

Hi Craig,

The CSS David mentioned is generated by WPSP but you can override that by adding the CSS David suggested. :)

Try adding it on the additional CSS. :D

I have added the CSS as suggested but the image now appears to be slightly wider than the title and excerpt text when viewing on both desktop and mobile

Not sure I see what you mean.

Here's a test of the CSS on your site - https://share.getcloudapp.com/YEuZWgn2

As you can see, the div occupies the same width.

If what you meant what the excerpt not going from edge to edge of the horizontal container, that's because the supposed last word of the line doesn't fit so text wrapping happens.

On desktop it looks fine but on mobile the image occupies about 75% less of the width of the text

Here's what I see on my mobile phone (android - chrome).

Ah I think we're seeing 2 different things. Perhaps you're seeing the 2nd WPSP list and I'm seeing the first one.

The CSS David provided only applied to the first one because the #wpsp-id is specified on the selector.

Try this:

.wp-show-posts-image img {
    width: 100%;
}

.wpsp-card .wpsp-content-wrap {
    padding: 20px 0 !important;
}

This one applies to all WPSP lists.

Well spotted! This has done the trick, thanks guys.

I want to the same thing to all the posts on category pages which are just regular category pages without using WPSP.

In fact, I want all post cards throughout the site to look the same.

Should I create another support topic for this or are you able to tell me how to do that here?

Where can we see the other Posts - couldn't find a blog or an archive page on your site ?

Hi David,

I have added a link to a category page privately

In Customizer > Layout > Blog --> Featured Images >>> archvies tab. Try checking: Display padding around images and make sure any image sizes you have set match those of the WPSP list.

That should align the text / images.

Hi David,

I have done that but the title and excerpt don't seem to align

The title and text and read more button all look "indented" to me. As if the image is about 20px from the margin but the text is 40 or something

Scratching my head at this

Is the Archive (tab) >> Display padding around images still checked - as on the link i still see the negative margins that is applied to it ?

Hi David,

I apologise, I must have misread your earlier message. I have now checked the display padding box and it appears to have sorted the issue

Thanks for your help