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.
Thank you!
Nelson
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!
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!
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
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%;
}
Yes that is the white overlay I will try it now
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;
}
}
}
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;
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;
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;
}
1 Like
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?
margin-top: 20px !important;
should be on 1 line
Here is what it looks like when I implemented it
1 Like
Thank you very much!
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!
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!
Here are the code that I used to make slideshow on my homepage @JohnFromJotting