Make mobile image slide same as desktop

[ZaDu]

Hello. On my image slideshow section on my desktop, the heading is placed on top of the image, whereas on mobile the heading is placed underneath. I want the mobile to be appear the same as on desktop with the writing overlaying the the visual rather than beneath. Hopefully this makes sense, if so what is the coding to do so?  

URL: https://zaduonline.com

[dmwwebartisan]

@ZaDu 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px){
.slideshow__subtitle--mobile, .slideshow__title--mobile {color: #fff;}
.slideshow__text-wrap--mobile {position: absolute !important; background-color: transparent !important;}
}

 Hope this works.

Thanks!

[ZaDu]

Hi. Thankyou it worked, although it doesn't look the best, is there any way to change the size of the text only for the mobile store?

[dmwwebartisan · Accepted solution]

@ZaDu 

Please add the following code for mobile.

@media only screen and (max-width: 749px){
.slideshow__text-content--mobile {padding-top: 10.6rem !important;}
.slideshow__subtitle--mobile, .slideshow__title--mobile {font-size: 0.8em !important;}
.slideshow__btn {min-height: 1.125rem !important; line-height: 1.2 !important;}
.slideshow__btn--mobile {font-size: 0.8em;}
}

Thanks!

[ZaDu]

Thankyou so much!