Solved

Heading and Background image too large on mobile device

chriscaldwell11
Shopify Partner
15 1 4

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.jpgmobileview.jpg

 

Accepted Solution (1)

SAN_MSWEB
Shopify Expert
1106 131 137

This is an accepted solution.

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

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
6136 1472 1818

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

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


chriscaldwell11
Shopify Partner
15 1 4

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
Shopify Partner
6136 1472 1818

Your welcome 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


chriscaldwell11
Shopify Partner
15 1 4

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.

SAN_MSWEB
Shopify Expert
1106 131 137

This is an accepted solution.

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
Shopify Partner
15 1 4

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