Liquid, JavaScript, themes, sales channels
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!
Solved! Go to the solution
This is an accepted solution.
@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;
}
}
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.
@farrojewelry
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
This is an accepted solution.
@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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024