- This topic has 15 replies, 3 voices, and was last updated 4 years, 9 months ago by
.
-
Posts
-
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
Customer Support
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;
}
}Customer Support
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. 😀
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 imagesand 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
- You must be logged in to reply to this topic.
