I have looked all over message boards and put in code but nothing seems to work. The image banner works perfectly on the desktop but doesn’t resize for the mobile site.
This is the desktop image link https://imgur.com/slyCTCp
This is the mobile image link https://imgur.com/PqnESs2
Link for our website is https://farrojewelry.com
Please help us recode the mobile version!
Aibek is here from Speedimize.io
You have a widescreen picture that is not suitable for the mobile version. If you change the css background-size: contain property, the picture becomes smaller, but it fits under the screen size.
We recommend using a different version of the image that is more suitable for the mobile version of the site. Edit the text in the image and adjust the size.
Hope that helps you.
To be honest, this does not help much. We have tried multiple different image resolutions that Shopify recommends and the image is still cut off on mobile. We were hoping for more of an in-depth response on how we would go into the coding and resize the image for solely the mobile site.
This is, unfortunately, a common issue with all free themes in Shopify. This can be a potential quick solution to avoid digging into coding and/or hiring a developer.
Kind regards,
Diego
@farrojewelry please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. for mobile display
@media only screen and (max-width: 759px){
.template-index .background-size-cover{
background-size: contain;
background-position: center center;
max-height: 100%;
max-width: 100%;
background-repeat: no-repeat;
}
}
Worked perfectly much appreciated!