Heading and Background image too large on mobile device

Store Design

Topic summary

A user is experiencing two mobile responsiveness issues on their Shopify development site:

Problems identified:

  • Main heading text displays too large and breaks on iPhone
  • Background image appears oversized and blurry on mobile devices

Solutions provided:

For heading size: A contributor shared custom CSS code to be placed in Theme.liquid before the </body> tag, which successfully reduced the heading text size on mobile.

For background image: Multiple users suggested creating a mobile-specific section that displays a different image (the user has a blue wave illustration ready). A video tutorial about mobile-specific sections was shared, though the original poster found it difficult to follow as it focused on slideshows.

Current status:

  • Heading issue: Resolved using the CSS solution
  • Background image swap: Unresolved - user still needs guidance on implementing mobile-specific images

A secondary user later encountered the same heading issue but had trouble locating the </body> tag. They were advised it appears after </head> and before </html> in the theme.liquid file.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello,

My development site is located here:

https://floatron.myshopify.com/

Pw: **QuincyJones11!!

I have 2 issues involving mobile-responsiveness:

  1. When I view this site on iPhone, the main heading is so large it looks weird and breaks. (screenshot attached)

  2. The background photo is too big and blurry on phone. While I would like to keep this image for desktop viewing, it might be better to have a different background image to display when viewing the site on cell phone. (I have attached the image I prefer to use on mobile devices. it’s just a blue image with illustrated waves)

Thank you VERY much for your help and kindness.

Chris

blue-gradient-test-2.jpg
blue-gradient-test-2.jpg1902Ă—1080 18.3 KB

mobileview.jpg
mobileview.jpg480Ă—1039 40.7 KB

1 Like
2

Hi @chriscaldwell11

I would advise have a different image for your mobile. You can assign a section that will show on mobile only. Please follow the video tutorial below

3

Thank you so much for your quick response! I am going to watch this now. Hopefully, it will address the text heading displaying too large, too!

Thank you! You guys are amazing.

4

Your welcome

5

I watched the tutorial, but couldn’t quite understand everything, since it primarily dealt with slideshow. I just want to make the heading text smaller on mobile devices and swap the desktop image out for the one I had attached. I will study more, but I’m kind of trying to get this done on a deadline. Thank you again for your kind help.

6

Hello,

I am San from MS Web Designer.

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before

Do let me know in case of any concerns.

Regards,

San

7

Hi San,

This worked to make the heading text smaller! Thank you so much! Now, I just need to swap the background picture when viewing in mobile devices. The background photo I have in there now is too big and blurry. I wanted to make it so a different picture displays when someone views it on cell phone using the attached blue with waves image in the original post. Can you tell me how to do this? Thank you again. I really appreciate it.

Chris

8

Help!! I have the same issue with the mobile version being very large and not adjusting. I tried to search for the "” but it says none found.. so I am not sure where to add the code. please help

9

The tag begins right after the tag. The tag is usually at the end of the theme.liquid file, right before the tag.

So just put the code in the Accepted Solution above somewhere before the tag.