How can I make my homepage banner images responsive on Xtra Theme?

[daniellim]

Hi,

Wondering how to make my homepage banner images responsive so that I can use the same image with text on all platforms without getting cut off.

Website: https://www.cleardeals.com.au/

Appreciate any help thanks!

[shreyhweb]

@daniellim

Please add the given code above in theme.liquid

online store >> edit code >> theme.liquid

@media screen and (max-width: 767px) { .m6fr.size-s-mobile article:not(.aside){ min-height:310px } .m6fr figure img{ object-fit:contain!important; } } @media screen and (max-width: 480px) { .m6fr.size-s-mobile article:not(.aside){ min-height:135px } .m6fr figure img{ object-fit:contain!important; } }

i hope its helpful for you.

[daniellim]

Thank you so much! That worked

[daniellim]

Hi There,

I was wondering if i could get your help again? I’ve just updated the theme on my site and i tried using the previous code that you shared but when resizing there is a white bar above and below the image. The background doesn’t seem to resize with the image.
Would you be able to help me with this?