Mobile Slideshow Button View - Debut Theme

7 0 1

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?




Replies 11 (11)
Shopify Partner
9202 1563 1928

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;
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: | Skype : oscprofessionals-87
7 0 1

Almost hahaha