Jump to content

Thumbnail image showing too large on mobile

Recommended Posts

Site URL: https://www.next25.org.au/blogmain/three-forces-stifling-action-on-climate-change-jeopardise-australias-future-more-broadly

The thumbnail image that displays as the banner of the blog (also on blog homepage) looks good on desktop but then is far too large on mobile. Is there a way to fix this so that the thumbnail image resizes for display on mobile devices? See screenshot of how it looks on mobile and link to desktop display in site URL392626554_ImagefromiOS.thumb.png.59a6bb1e0f96af2f994b04ff27a5a6ce.png. Thanks!

Link to comment
  • Replies 2
  • Views 725
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 8/19/2021 at 9:03 AM, Next25 said:

Site URL: https://www.next25.org.au/blogmain/three-forces-stifling-action-on-climate-change-jeopardise-australias-future-more-broadly

The thumbnail image that displays as the banner of the blog (also on blog homepage) looks good on desktop but then is far too large on mobile. Is there a way to fix this so that the thumbnail image resizes for display on mobile devices? See screenshot of how it looks on mobile and link to desktop display in site URL392626554_ImagefromiOS.thumb.png.59a6bb1e0f96af2f994b04ff27a5a6ce.png. Thanks!

Add to Design > Custom CSS

/* resize mobile blog post thumbnail */
@media screen and (max-width:640px) {
body.collection-type-blog.view-item figure#thumbnail img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
body.collection-type-blog.view-item .banner-thumbnail-wrapper {
    height: 100px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.