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

[boomingbeats]

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

Best regards,

Jim

[oscprofessional]

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;
}
}

[boomingbeats]

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

[oscprofessional · 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 

[boomingbeats]

This worked perfectly. Thank you very much!

Regards,

Jim