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

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

- This is the mobile image link

- Link for our website is

Please help us recode the mobile version!



Shopify Partner
213 35 93

Hi @farrojewelry 

Aibek is here from 

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:

If our advice was helpful please LIKE or ACCEPT SOLUTION
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.



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,

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact:
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 :
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
New Member
3 0 0

Worked perfectly much appreciated!