Image with Text Overlay not aligning properly on mobile version. Debut Theme.

Solved
Highlighted
Tourist
4 0 0

Hi everyone! I am trying to make my Image with Text Overlay to properly resize on my phone version. It works great on desktop but gets cut off and appears offset when viewed on an iPhone, however, it works great on my Samsung S8 plus. I understand that I need to make add some code my theme.scss file, however I am unable to figure it out, and other solutions on this forum don't work for me. I believe I need to have different settings for the phone version and the desktop version. Can anyone help me with this? Any help is greatly appreciated. 

 

The website is www.boomingbeats.com  password:epsilon

boomingbeats_0-1601300521411.png

boomingbeats_1-1601300557346.png

Best regards,

Jim

0 Likes
Highlighted

 


Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and(max-width:500px){
.mega-title--large {
    font-size: 27px;
    width: 80%;
}
.search input[type="text"] {
    width: 75%;
    font-size: 13px;
}
.search input[type="submit"] {
    width: 23%;
    font-size: 13px;
}
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
4 0 0

Wow. Is it possible to center the text? Then it would literally be perfect.

0 Likes
Highlighted

This is an accepted solution.

 

 

@media only screen and(max-width:500px){
.mega-title--large {
    font-size: 27px;
    width: 100%;
}
.search input[type="text"] {
    width: 75%;
    font-size: 13px;
}
.search input[type="submit"] {
    width: 23%;
    font-size: 13px;
}
}

update it 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
4 0 0

This worked perfectly. Thank you very much!

 

Regards,

Jim

0 Likes