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

Solved
farrojewelry
New Member
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!

 

 

0 Likes
Speedimize
Shopify Partner
213 35 93

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.

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
farrojewelry
New Member
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.

0 Likes

@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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
Natztech
Shopify Partner
626 167 419

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;
}
}
Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
farrojewelry
New Member
3 0 0

Worked perfectly much appreciated!

0 Likes