Make mobile image slide same as desktop

Solved
ZaDu
Excursionist
47 0 13

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

0 Likes
dmwwebartisan
Shopify Partner
4578 1028 1322

@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!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ZaDu
Excursionist
47 0 13

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
Shopify Partner
4578 1028 1322

This is an 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!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ZaDu
Excursionist
47 0 13

Thankyou so much!