Hi, I’m having the same issue outlined here:
https://community.shopify.com/c/technical-q-a/image-with-text-overlay-not-aligning-properly-on-mobile-version/td-p/897252
I just having trouble implementing it on my own site. My site is
glowupinc.store and the password is Enter
Any help would be greatly appreciated 
If me, I may try to add some CSS to the theme.css.liquid or at the Custom CSS box at the theme customization.
@media only screen and (max-width: 500px) {
.banner__buttons {
width: auto;
}
.banner__heading {
width: 100%;
}
.banner__box {
padding: 4rem 0rem
}
}
Okay I think its the container size because when I disable the container on mobile it works how I want but I can’t seem to figure out to keep the container how it is on desktop
How about keep the container and adding CSS to modify the mobile view?
@media only screen and (max-width: 500px) {
}
It did the same as what you added.
First of all, try edit the .banner__box
remove
width:85%
add
padding: 4rem 0rem
and change the width of the .banner__heading from 90% to auto.
Hello, I did exactly what you outlined, but I still want the green box to show up on mobile. But, when I select the option for it to show up on mobile the text and buttons show up below the image
like this?
.banner__box {
max-width: 400px;
width: auto;
padding: 1rem !important;
background-color: #8ee4af;
border-radius: 10px;
}
.banner__content {
order: 2;
margin-top: -300px;
}
Perfect! Thank you so much!
