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

[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

[Bluish]

@Trilogysw 

Are you talking about that white overlay?

[Bluish]

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

Yes that is the white overlay I will try it now

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

[Bluish]

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

I searched it and still couldn't find 

only this

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

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