Mobile Slideshow Button View - Debut Theme

[Winslows_Loft]

Hi there, 

I am currently using the debut theme and the slide show looks great on the desktop version - the shop now is overlaying the images and the toggle buttons at the bottom of the slides are transparent and white. However, on the mobile version it shifts to the bottom and there is an awkward white box around it. How do I make the mobile version look the same as the desktop version?

url: www.winslowsloft.com

Thanks, 

Kieron

[dmwwebartisan]

@Winslows_Loft 

Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
.slideshow__btn {
    display: block !important;
    max-width: 46%;
    min-height: 1.125rem;
   line-height: 1.2;
   margin: 0 auto;
   font-size: small;
}

.slideshow__text-content--mobile-active {display: none !important;}
.slideshow {max-height: 35vh !important;}
}

Thanks!

[Winslows_Loft]

Thank you, but now the button has disappeared completely and the arrows are still in the awkward white box 

 

[dmwwebartisan]

@Winslows_Loft 

please remove i provided css code i will send new correct css code.

[Winslows_Loft]

My shop now button on the desktop version is now top centre instead of middle centre as I wanted it - how do I change this back? 

[dmwwebartisan]

@Winslows_Loft 

Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.slideshow__text-content.slideshow__text-content--vertical-top {
    top: 50% !important;
}
}

[Winslows_Loft]

This has fixed the desktop version - however, the mobile version still looks like this. How do I get the shop button to overlay the images?

[oscprofessional]

Hey @Winslows_Loft 

You can try this code . It might help you at some level.

 @media only screen and (max-width: 749px) {
.slideshow__text-wrap--mobile {
    top: -6.1rem;
    background-color: rgba(0,0,0,.75);
}
.slideshow__btn--mobile {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    min-height: auto;
}
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
    padding-top: 0;
}
.slideshow__arrows--mobile {
width: 169px;
    margin: 0 auto;
    background-color: rgba(0,0,0,.4);
}
.slideshow__arrows .slideshow__arrow .icon {
    fill: #fff;
}
.slideshow__arrows .slick-dots li a::before {
    color: rgba(255,255,255,.5);
}
.slideshow__arrows--mobile .slick-dots li.slick-active a::before, .slideshow__arrows--mobile .slick-dots li.slick-active button::before {
    color: #fff;
}
}

[Winslows_Loft]

Almost hahaha

 

[Winslows_Loft]

The desktop version of the slideshow has now also become really small? 

[Zworthkey]

Hii, @Winslows_Loft 
Paste this code on top of the theme.scss file.

@media only screen and (max-width: 749px){
.slideshow__text-wrap.slideshow__text-wrap--mobile {
    margin-top: 25px !important;
}
}

Thank You.

[Winslows_Loft]

Nothing has changed with this code