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

Solved
JordanM
Explorer
42 2 5

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.

 Test 1.JPG

Test 2.JPG

0 Likes
dmwwebartisan
Shopify Partner
4354 977 1243

@JordanM 

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

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
JordanM
Explorer
42 2 5

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

0 Likes
dmwwebartisan
Shopify Partner
4354 977 1243

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

 

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
JordanM
Explorer
42 2 5

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
Shopify Partner
4354 977 1243

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

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
JordanM
Explorer
42 2 5

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. Image 1.JPG

@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; 
}
}

  

0 Likes
JordanM
Explorer
42 2 5

This is an 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; 
}
}