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

Solved
Highlighted
Tourist
7 0 0

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

0 Likes
Shopify Partner
3135 682 835

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

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
3135 682 835

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

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
7 0 0

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

0 Likes
Highlighted

@Trilogysw 

Are you talking about that white overlay?

example.JPG

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted

@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%;
}
If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
Tourist
7 0 0

Yes that is the white overlay I will try it now

0 Likes
Highlighted
Tourist
7 0 0

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;
    }
  }
}
0 Likes
Highlighted

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

 

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
Tourist
7 0 0

Yes I am in theme.scss.liquid @Defineify 

I searched it and still couldn't find 

only this

 

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

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

 

0 Likes