Re: Image with Text-Overlay broken on mobile

Solved

Why is my text-overlay image not displaying correctly on mobile?

Glow_Up_Inc
New Member
5 0 0

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-mobil...

 

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 🙂 

Accepted Solution (1)
CoreyNg
Shopify Partner
41 4 1

This is an accepted solution.

like this?

CoreyNg_0-1689176481868.png

.banner__box {
max-width: 400px;
width: auto;
padding: 1rem !important;
background-color: #8ee4af;
border-radius: 10px;
}

.banner__content {
order: 2;
margin-top: -300px;
}

View solution in original post

Replies 9 (9)

CoreyNg
Shopify Partner
41 4 1

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

Glow_Up_Inc
New Member
5 0 0

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

 

CoreyNg
Shopify Partner
41 4 1

How about keep the container and adding CSS to modify the mobile view?
@media only screen and (max-width: 500px) {

 

}

Glow_Up_Inc
New Member
5 0 0

afd.JPG

Im trying to do that, still can't seem to make it work 

CoreyNg
Shopify Partner
41 4 1

It did the same as what you added.

CoreyNg_0-1689134801727.png

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.

 

CoreyNg
Shopify Partner
41 4 1

CoreyNg_0-1689136321202.png

CoreyNg_1-1689136487733.png

 

 

Glow_Up_Inc
New Member
5 0 0

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 

CoreyNg
Shopify Partner
41 4 1

This is an accepted solution.

like this?

CoreyNg_0-1689176481868.png

.banner__box {
max-width: 400px;
width: auto;
padding: 1rem !important;
background-color: #8ee4af;
border-radius: 10px;
}

.banner__content {
order: 2;
margin-top: -300px;
}

Glow_Up_Inc
New Member
5 0 0

Perfect! Thank you so much!