Escaping Text on Mobile Image Banner

[HighTide_Ceylon]

In the mobile version of my website. I noticed that one of the image banners has it's text working fine on Desktop. However, on the mobile version the text has escaped into a section below instead of remaining on the image banner. How do I ensure it remains on the banner instead of escaping?

[dhimansangeeta]

hello @HighTide_Ceylon 

please give me your website Url.So i can find the problem.

thanks

[HighTide_Ceylon]

www.hightideceylon.com

[dhimansangeeta]

hello @HighTide_Ceylon 

Go Online Store > Themes > Customize > Theme Settings > Custom CSS
Or use the code editor via Edit code > theme.liquid or base.css.

Paste this CSS:

@media (max-width: 767px) {
  .image-with-text__content {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    width: 90%;
    color: white; /* Adjust for contrast */
  }

  .image-with-text__media {
    position: relative;
  }

  .image-with-text__media img {
    width: 100%;
    height: auto;
    display: block;
  }
}

If this was helpful, hit the like button and accept the solution.
Thanks

[HighTide_Ceylon]

Hey, 
I updated my 'base.css' file with the snippet you shared, but it doesn't show any changes. The text still remains in the section below on mobile.

[tim · Accepted solution]

No code needed, just turn off "Container" in section settings:

[HighTide_Ceylon]

This solution does not work. Container was toggled off.

[tim]

Both for Desktop and Mobile? There are 2 toggles.

[HighTide_Ceylon]

Yes, both toggles are off.

***Correction***

Just noticed that it was switched on Mobile. Didn't notice there was a separate container toggle for Mobile Layout. Thank you so much!