Hi! I have uploaded my own image to use as a banner in my store, but the image does not resize to view properly when on a mobile device. Is there a way to fix this? I have tried different solutions to this by adding custom CSS text to my theme, etc. but nothing has worked so far. I’d love to see if there’s a solution!
Thanks!
Website: thecozymoonco.com
Hi @cozymoonco
You can try to add this code before tag in your theme.liquid file to check if it is ok.
Gotcha! I removed lines 16 & 22, and my mobile view still has not changed 
My bad, it has some incorrect character in my code, please update like this
@media screen and (max-width: 749px) {
.banner__media, .banner__media img { position: relative !important; }
.banner__media img { object-fit: contain !important; }
.product-media-container.constrain-height .media { padding-top: 0px !important; }
}
Hi! Thank you so much for your help! That new code worked! However, it looks like the banner is extra long and it’s cutting off my products photo. I tried messing around with the settings, but I wasn’t able to fix it. It looks like this on mobile & while editing in Shopify. I was wondering if you have any suggestions for this?
Please add this addition code to remove that blank space
.banner__content { display: none !important; }
Awesome! The white space is now gone, but my product image still is not showing up.
Please try remove this line of code and check again
.product-media-container.constrain-height .media { padding-top: 0px !important; }
Ahh it’s perfect! Thank you SO much for your help, I truly appreciate it!!