How to add text over an image on mobile

[annanguyen]

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

[Abdosamer · Accepted solution]

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

}

[annanguyen]

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

[Abdosamer]

@annanguyen , Add the following code :

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

}