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

Solved
JordanM
Explorer
53 2 7

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
5292 1222 1567

@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
53 2 7

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
5292 1222 1567

@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
53 2 7

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
5292 1222 1567

@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
53 2 7

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
53 2 7

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

 

Jan1404
Excursionist
12 1 2

Hi, I have a question.

I had the same issue, and this solution helps. 

But I want to add a button to, and it does not work on the mobile version.

Is it possible to edit the code so the button will also work on the mobile version with this code?

 

Thank you in advance!

0 Likes