How to add text over an image on mobile

Store Design
, , , ,
1

I put text over the image and made it a transparent text box on desktop version adding this to custom css:

.banner__box.content-container {
background: transparent !important;
}
.banner__box.content-container * {
color: white !important;
}
.banner__box.content-container .banner__buttons a {
background: transparent !important;
}

But it doesn’t work for the mobile version. How can I put the text on top of the photo for the mobile version as well? My website is: oliveandhaze.com

Screenshot_23-2-2025_173345_admin.shopify.com.jpeg
Screenshot_23-2-2025_173345_admin.shopify.com.jpeg753×1422 101 KB

2

Hi @annanguyen , Go to section-image-banner.css file and add the following code to it :

@media(max-width:600px){

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
   
    bottom: 25rem !important;
}

}
1 Like
3

Now there is a large blank space at the bottom of the image. How do I get rid of that? Thanks!

1 Like
4

@annanguyen , Add the following code :

@media(max-width:700px){
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
    order: 2;
    height: 0 !important;
}

}
1 Like