Solved

Image with Text Overlay is cut off on mobile (Using Broadcast theme)

farrojewelry
Visitor
3 0 0

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!

 

 

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

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;
}
}

View solution in original post

Replies 5 (5)

Not applicable

Hi @farrojewelry 

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.

farrojewelry
Visitor
3 0 0

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.

diego_ezfy
Shopify Partner
2907 557 872

@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

Kinjaldavra
Shopify Partner
2302 570 1422

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;
}
}
farrojewelry
Visitor
3 0 0

Worked perfectly much appreciated!