How to remove the big square on mobile on Debut slideshow?

[JordanM]

In the first photo, you can see my desired result: A slideshow with only the dots. 

In the second photo, you can see the rectangle that appears and I want to remove it so that only dots appear.

 

[dmwwebartisan]

@JordanM 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[JordanM]

Hi @dmwwebartisan,

unfortunately, my store is on a pause plan (pause and build) so I don't think that you will be able to find it. I think that it would be better if you could try to remove it on your Debut theme and then tell me what to do. Sorry for the inconvenience.

Jordan

[dmwwebartisan]

@JordanM 

I understand. You can give me a preview URL. It will work.

Let me know otherwise I have to check with a fresh debut theme but your case must be there.

[JordanM]

Hello @dmwwebartisan ,

could you try to do this on a fresh Debut theme and tell me what to change. If that doesn't work I will send you my store URL.

Thanks in advance!

[dmwwebartisan]

@JordanM 

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

@media only screen and (max-width: 749px){
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile{ display: none !important; padding-topL 0px !important;}
.slideshow__text-wrap--mobile { top: -2.74rem !important; background-color: transparent !important; }
}

Hope this helps.

Thanks! 

[JordanM]

Hi @dmwwebartisan ,

sorry for the late reply but I've been busy and I couldn't answer you. I really appreciate your help and effort, thank you a lot. I added the code in the bottom of theme.scss but it seems to mess up my page. I don't know the reason why it happens. Would love it if you could help me out.

@media only screen and (max-width: 749px){
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile{
  display: none !important; 
  padding-topL 0px !important;
}
.slideshow__text-wrap--mobile {
  top: -2.74rem !important; 
  background-color: transparent !important; 
}
}

[JordanM · Accepted solution]

Hi @dmwwebartisan ,

I managed to fix the issue. It looks like you had forgotten to ad ":" at the end of padding-topL. I thank you a lot for your help. Awesome service!

That's the fixed script:

@media only screen and (max-width: 700px){
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile{
  display: none !important; 
  padding-topL: 0px !important;
}
.slideshow__text-wrap--mobile {
  top: -2.74rem !important; 
  background-color: transparent !important; 
}
}