Image Banner Block Text Info Not Showing On Mobile

Shopify Discussion
1

Hello,

I have an image banner coded to have a text box layered on top; it was initially showing on mobile view, but now it is not, and I need help figuring out what happened.

Thank you!

Desktop

Screenshot 2024-11-15 at 11.25.29 AM.png
Screenshot 2024-11-15 at 11.25.29 AM.png2148×1538 777 KB

Mobile

Screenshot 2024-11-15 at 11.25.37 AM.png
Screenshot 2024-11-15 at 11.25.37 AM.png1104×1146 240 KB

2

Hi @riveringroots

I notice that the mobile text does not overlay the image like it does on desktop; instead, the text shows below. You can check it again. If it is not working You can share store link, I will check for you.

3

Hi,

I do not see the text showing below the image on mobile. I would be okay with this option if I could figure out what is going on.

URL: https://riveringroots.com

pass: rtawqpz

4

Hi @riveringroots

You can follow the instruction below:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

@media screen and (max-width: 749px) {
    .banner--mobile-bottom:not(.banner--stacked) .banner__content {
        display: block !important;
    }
}

I hope it helps.

5

@LizHoang thank you so much!!