Debut Theme - How do I remove the white box under slideshow for website on mobile?

[Trilogysw]

Hi guys, 

Could someone please help me figure out what code I need to remove the white box that appears under the slideshow, when viewing my website on mobile.

It is perfectly fine on computer but on mobile it shows a box. 

www.trilogystreetwear.com.au

Thank you!

Nelson

[JohnFromJotting · Accepted solution]

@Trilogysw 

very odd,

ok lets tag on, with the original edit you had from the previous poster

instead of below, put margin-top: 20px; delete the padding and display non

.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 1.7rem;
display: none !important;
}

[dmwwebartisan]

@Trilogysw 

That white box shows a caption or you can say the text of that slide. The first slide you have the text "Welcome to TRILOGY" so in the white box it displays that text with the first slider. When it moves to the next slider that white box disappears because other slides don't have text/captions.

Hope I explained well 🙂

Thanks!

[dmwwebartisan]

@Trilogysw 

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

.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 1.7rem;
display: none !important;
}

Let me know if this works.

Thanks! 

[Trilogysw]

Hey, Thank you for the fast reply.

When I put that code in it removed the white box but it also removed the shop now button and the text from website view too. 

Is there a way to remove just the white box?

Thanks

[JohnFromJotting]

@Trilogysw 

Are you talking about that white overlay?

[JohnFromJotting]

@Trilogysw 

If it's that white box above. The fix here is below, go to your theme.scss file, search for the below code

.slideshow__text-content::after {
content: '';
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
margin-left: -20px;
margin-top: -20px; <<<<<<<<<< DELETE THIS ONE
border-radius: 50%;
border: 3px solid #fff;
border-top-color: rgb(255, 255, 255);
border-top-color: transparent;
-moz-animation: spin 0.65s infinite linear;
-o-animation: spin 0.65s infinite linear;
-webkit-animation: spin 0.65s infinite linear;
animation: spin 0.65s infinite linear;
opacity: 1;
transition: all 1s cubic-bezier(0.29, 0.63, 0.44, 1);
bottom: -55px;
left: 50%;
}

[Trilogysw]

I could not find that text in my code. 

This is the only similar things i found:

.slideshow__text-content {
  @include media-query($medium-up) {
    transition: $transition-text-slideshow;
    transition-delay: 0.3s;
  }

  .slideshow__text-wrap--desktop & {
    position: absolute;
    width: 100%;
    top: 50%;
    opacity: 0;
    z-index: $z-index-slideshow-text;
  }

  @include media-query($medium-up) {
    &.slideshow__text-content--vertical-top {
      top: 120px;
    }
    &.slideshow__text-content--vertical-bottom {
      top: auto;
      bottom: 40px;
    }
  }

  .slick-initialized .slick-active &,
  .no-js & {
    @include transform(translateY(-40px));
    opacity: 1;
  }

  .slick-initialized .slick-active &.slideshow__text-content--vertical-center,
  .no-js &.slideshow__text-content--vertical-center {
    @include transform(translateY(-50%));
  }

  &::after {
    content: '';
    @include spinner(40px, $slideshow-loader);
    @include animation(spin 0.65s infinite linear);
    opacity: 1;
    transition: all 1s cubic-bezier(0.29, 0.63, 0.44, 1);
    bottom: -$gutter-site;
    left: 50%;

    @include media-query($small) {
      content: none;
    }
  }

  .slick-initialized &,
  .no-js & {
    &::after {
      opacity: 0;
      visibility: hidden;
      content: none;
    }
  }
}

.slideshow__text-content--mobile {
  display: none;
  padding-top: 2.6rem;

  .slideshow__arrows--mobile ~ & {
    padding-top: 1.7rem;
    @include media-query($medium-up) {
      padding-top: 0;
    }
  }

  @include media-query($medium-up) {
    padding-top: 0;

    &::after {
      display: none;
    }
  }
}

[JohnFromJotting]

@Trilogysw 

are you in the theme.scss file?

Search for the below element there wouldn't be too many finds with this as it's a very specific element.

margin-top: -20px;

[Trilogysw]

Yes I am in theme.scss.liquid @JohnFromJotting 

I searched it and still couldn't find 

only this

.slideshow__title--mobile {
  margin-bottom: 0;

  & ~ .slideshow__subtitle--mobile {
    margin-top: 0.5rem;

[JohnFromJotting · Accepted solution]

@Trilogysw 

very odd,

ok lets tag on, with the original edit you had from the previous poster

instead of below, put margin-top: 20px; delete the padding and display non

.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 1.7rem;
display: none !important;
}

[Trilogysw]

Thank you for taking your time to help me with this, i appreciate it!

I did what you said and inserted this

.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
margin-top: 20px;
!important;
}

It changed the whole website and made everything change. Is there any other solutions you can think of? 

[JohnFromJotting · Accepted solution]

margin-top: 20px !important;

should be on 1 line

@Trilogysw 

Here is what it looks like when I implemented it

[Trilogysw]

Thank you very much!

[HijinxToyShop]

Hello,

I am wondering if you could help me with a similar issue.
The beige box and the pause button is covering the image

Any help you could offer I would greatly appreciate it!

[IamLLIIME]

Good day! Can you also help me hot to remove the dots below slideshow to remove the space/Gap or move it inside the slide itself? Thankyou!

@JohnFromJotting 

[IamLLIIME]

<div class="flexslider">
<ul class="slides">

<li><img src=""/></li>
<li><img src="https://cdn.shopify.com/s/files/1/0427/7302/0824/files/TOTAL_TECHNOLOGY_SOLUTIONS_PROVIDER.png?v=161...>

</ul>
</div>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false
});
});
</script>

Here are the code that I used to make slideshow on my homepage @JohnFromJotting 

[Trilogysw]

Yes that is the white overlay I will try it now