Heading and Background image too large on mobile device

chriscaldwell11 · ‎05-09-2024

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

INA_MSWEB · ‎05-09-2024

Hello,

I am San from MS Web Designer.

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

<style>
@media (max-width:550px){
.banner__content {width:90% !important}
.banner__heading.inline-richtext {font-size:35px !important}

}
</style>

Do let me know in case of any concerns.

Regards,

San

If it’s helpful to you, please mark it as a solution.

Need Help with Shopify Design, Migration, Speed, or Custom tasks?
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

View solution in original post

Made4uo-Ribe · ‎05-09-2024

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

chriscaldwell11 · ‎05-09-2024

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.

Made4uo-Ribe · ‎05-09-2024

Your welcome

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

chriscaldwell11 · ‎05-09-2024

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.

INA_MSWEB · ‎05-09-2024

Hello,

I am San from MS Web Designer.

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

<style>
@media (max-width:550px){
.banner__content {width:90% !important}
.banner__heading.inline-richtext {font-size:35px !important}

}
</style>

Do let me know in case of any concerns.

Regards,

San

If it’s helpful to you, please mark it as a solution.

Need Help with Shopify Design, Migration, Speed, or Custom tasks?
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

chriscaldwell11 · ‎05-09-2024

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

RHeston · ‎09-11-2024

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

chriscaldwell11 · ‎09-11-2024

The <body> tag begins right after the </head> tag. The </body> tag is usually at the end of the theme.liquid file, right before the </html> tag.

So just put the code in the Accepted Solution above somewhere before the </body> tag.

Heading and Background image too large on mobile device

Heading and Background image too large on mobile device

Community Blog Articles