Thumbnail image showing too large on mobile

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 URL. Thanks!

Hi I am a blogger, I'm also facing same issue on my Raw Cashews Blog, If you found any solution Please let me know. Thanks in Advance!

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