Help My banner cuts off on my mobile view website!

Store Design

Topic summary

Store owners are experiencing banner display issues on mobile devices where text or images get cut off, despite appearing correctly on desktop. The banners either crop improperly, show white gaps, or fail to scale appropriately on smaller screens.

Primary Solution Offered:
A CSS code snippet is provided to paste into theme.scss.liquid that adjusts background sizing and max-height for mobile viewports:

  • Navigate to: Online Store > Themes > Actions > Edit Code
  • Add custom CSS media queries targeting mobile screens (max-width: 767px or 749px)
  • Code forces background-size: contain and adjusts height parameters

Multiple Cases Addressed:

  • Original poster (lunarynboutique.com) with banner text cutoff
  • Blog post images cutting off on the right side
  • Hero image overlay text positioning incorrectly
  • Various themes affected (Minimal, Impulse Modern, Debut)

Status:
The thread remains active with multiple users requesting help for their specific stores. Solutions appear customized per site/theme, with some users confirming fixes worked while others report continued issues. Several cases require password-protected store access or additional screenshots for diagnosis.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am having an issue when you see my store on the computer the banners are perfect in size and nothing gets cut out.. but when I open my website on my phone it is cutting off my banners wording. Someone please help !

my website is lunarynboutique.com

1 Like
2

Hello, @LunaRyn

Welcome to the Shopify community!
and Thanks for your Good question.

sorry, we’re not able to store see the picture.

KetanKumar_0-1598808540929.png
KetanKumar_0-1598808540929.png1920×1080 253 KB

3

it is https://www.lunarynboutique.com/

4

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
@media (max-width: 767px){
    [id] .image-bar__item{
    background-size: contain !important;
    max-height: 40vw !important;
    background-color: unset !important;
}
}

Please let me know whether it works.

Kind regards,
Diego

5

I have this issue but mine seems to be just on my blog posts. Any help is appreciated. Thanks!

1 Like
6

@krwharton7

Welcome to the Shopify community!
and Thanks for your Good question.

Please share further issues screenshot.
So I will check and provide a solution here.

7

968A3CBD-0EDF-4A1D-A21B-01BE16FFA4F9.png
968A3CBD-0EDF-4A1D-A21B-01BE16FFA4F9.png1242×2208 332 KB

the right hand side is cutoff whether I turn the phone or not. Also you can’t even scroll to the right. Thank you!

8

@krwharton7

Thanks for the details

  1. Go to Online Store->Theme->Edit code
  2. **Asset->/theme.scss.liquid->**paste below code at the bottom of the file.
.template-article .rte div { width: 100% !important;}
1 Like
9

This worked perfectly Thank you!

1 Like
10

@krwharton7

Thanks for update.

11

Hello, @Rich2727

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

12

@Rich2727

it can be done some customization code send PM

13

Hi there,

I’m experiencing similar issues with my site: https://timberlandsupplyonline.com/

I tried copy pasting the code you provided and I’m still not seeing any change. Admittedly, I don’t have a coding background so that may be part of the problem.

1 Like
14

Hello, @TimberlandS

Thanks for post.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
#shopify-section-1599758262223 .hero {
    height: auto;
    background-size: contain;
}
}
15

@KetanKumar Hi, please help me. The same thing I experience on my mobile device. The image is not full width and there is a white gap between the hero image and the featured collection. The overlay text is below my hero image and not over the image.

my URL is www.https://everythingcutesy.myshopify.com/

password ETC10

16

@kokoshana

Thanks

can you please give me screenshots further isssue

17

the text is supposed to be an overlay text infront of the hero image but its at the bottom and the image is cut on mobile device
the text is supposed to be an overlay text infront of the hero image but its at the bottom and the image is cut on mobile device756×1128 337 KB

this is how I want it look but this is a different theme
this is how I want it look but this is a different theme750×1332 137 KB

@KetanKumar

18

@kokoshana

Thanks for post

if possible add different image desktop and mobile

19

Hello,

I have the same problem with minimal theme.

I tried your sollution but did not work… :disappointed_face:

Any advice?

1 Like
20

@Stam

Yes, please share store url