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

[CRAIG]

When displaying posts on my homepage and category pages (and anywhere else for that matter) I would like the image to always be the same width as the title and excerpt space beneath it.

Currently the images are set to 300px width by 200px from within the images section of the WP Show Posts list settings

By increasing the width of the image in the WP show posts settings, I can get it to display reasonably well on desktop view, but when viewing on a mobile device the title and excerpt are much wider than the image. I just want to have it so that the image is the same width as the title and excerpt…if they could be “locked” together in some way that would be great.

I have added a link to my homepage, as well as a link to another site (not mine) who has the set-up I would like.

Thanks,

Craig

[David]

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%;
}

[CRAIG]

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;
}
}

[Elvin]

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. 😀

[CRAIG]

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

[Elvin]

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.

[CRAIG]

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

[Elvin]

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.

[CRAIG]

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?

[David]

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

[CRAIG]

Hi David,

I have added a link to a category page privately

[David]

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.

[CRAIG]

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

[David]

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 ?

[CRAIG]

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

[Author]

Posts