Anyone know how to rescale page featured images for mobile

Hi,

I'm running off of the Henson template. I've noticed that the featured image that hovers for each page section gets cropped or cut off awkwardly when viewing in mobile.  Does anyone know a code or solve to have the featured page image scaled down when viewed on a mobile device? See screenshot example below

Thank you!

Greg

Hi,

Can you share link to this page?

Hi,

Yes, an example is

https://www.gregoryreidphoto.com/

if you hover over "accessories"

Thank you!

Greg

Try this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
[data-url-id="accessories"] img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !Important;
    opacity: 1 !important;
}
}

Hmmm it didnt seem to work

Can you keep code in CSS box? I can check it again easier

Sure! Just put it back in. Thank you!

It looks fullsize to me

You're correct! that is the size it should be. For some reason it is showing that image when you first enter the site and across other pages as well. But then all other images that should be shown in hover do not resize. See a few screenshots of the site attached as I let it cycle through.

Anyone have any luck?

Hi TuanPhan,

Happy New Year! Any luck on this?

Thank you,

Greg

Missed your notification, I will check it now

Thank you!

Did you fix it? I checked on some phones & all are fine

I was able to fix it, thank you!