Archived topic
Custom size archive page blog post featured image for mobile
6 replies · Started by Ryan on July 30, 2022
Hi there.
I am looking for a way to cusotmize the display layout for the blog list page (archive.php). Currently, I am happy with using the thumbnail size image for desktop and just left align the image to the blog title and excerpt.
However, this display does not look good on the mobile responsive, so I attempted to put in some additional custom css like so:
.inside-article .post-image img {width: 100%}
But then it just blows the small thumbnail image out and makes it look bad. I did try and go into the cusomizer and pick medium quality image and then set the width and height to 150px, but the image still appears blurry and low quality on my mobile viewport.
Hi there,
can you share a link to your site where we can see the issue ?
Sure thing, here is the link to the page - https://bangkokrentals.net/blog/
Hi David. Just wanted to check if there was an update to my forum posting yet. Is there a way to modify the intrinsic pixel dimensions of mobile blog post images? Do I need to create a new post thumbnail size for mobile that is larger than 150x150?
Hi Ryan,
Sorry for the late response. There might have been a bug with out ticketing system.
The srcset for images is controlled by WordPress.
Can you try setting it to full width? Then, you can try using a Block Element - Content Template with a GB Image Block to control the size of the image on different screen sizes.
Reference: https://docs.generateblocks.com/article/image-overview/
Content Template: https://docs.generatepress.com/article/block-element-content-template/
Not sure if your advice will help me here. I am referring to the post featured image and I am using the classic editor, not the block editor.
Actually, what I think I will do is modify the child theme to create another image size variation and then also modify the post template so that it can display this new size fullwidth on responsive viewport. Does that sound right?
Hi there,
apologies that you previous replies were overlooked, occasionally our helpdesk doesn't pick them up.
You current image is only 150px x 150px thumbnail.
So it will look terrible on Mobile if you try to scale that ip to fit the viewport.
I would suggest you choose an image size that fits the mobile view and that you're happy with the quality of.
And then we can use some CSS to downsize the image on Desktop.
