Dawn theme mobile slideshow text and button overlay

drawder
Shopify Partner
6 0 4

I'm not a coding expert whatsoever.
I've inserted a slideshow in my shop in dawn theme and on desktop looks just fine but on mobile my text box shows underneath the image. I'm trying to make my slideshow on mobile to have text overlay.
Can someone help me?

Replies 7 (7)

ZestardTech
Shopify Expert
5376 967 1290

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

AvadaCommerce
Shopify Partner
3879 839 945

Hi @drawder ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

banned
ZestardTech
Shopify Expert
5376 967 1290

Hello There,

1. In your Shopify Admin go-to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

 

@media (max-width: 767px){
.slider.slider--everywhere .slider__slide .banner__content {
position: absolute;
top: 0;
bottom: 0;
}
.slider.slider--everywhere .slideshow__text.banner__box {
background: rgb(255 255 255 / 50%);
}
}

 

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
drawder
Shopify Partner
6 0 4

Thank you very much. It worked but it inverted the color scheme. Where the overlay was black at 20% on desktop it became white on mobile inverting also the text color.

 

Can you help me?

 

I would also like to change the dots for the slides, putting them on top of the image and maybe move the arrows to the sides.

robvaughan
Shopify Partner
1 0 0

Has this ever been resolved?

XenithexCo
Visitor
1 0 0

In my case, this worked, without any offset color or blur:
@media (max-width: 767px){
.slider.slider--everywhere .slider__slide .banner__content {
position: absolute;
top: 0;
bottom: 0;
}
.slider.slider--everywhere .slideshow__text.banner__box {
background: rgb(50 50 50 / 0%);
}
}

Jwscrunchies
Tourist
3 0 0

I had the same issue, played around with the values and got it!

UPDATED:

 

@media (max-width: 767px){
.slider.slider--everywhere .slider__slide .banner__content {
position: absolute;
top: 0;
bottom: 0;
}
.slider.slider--everywhere .slideshow__text.banner__box {
background: rgb(50 50 50 / 50%);
}
}