Dawn theme mobile slideshow text and button overlay

Store Design
1

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?

2

Hello There,

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

3

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.

4

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%);
}
}
5

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.

6

Has this ever been resolved?

7

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

8

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