Mobile Slideshow Button View - Debut Theme

Winslows_Loft
Tourist
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?

url: www.winslowsloft.com

Thanks, 

Kieron

Replies 11 (11)

dmwwebartisan
Shopify Partner
12280 2546 3694

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Winslows_Loft
Tourist
7 0 1

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

 

44E07254-C2BC-4018-90AF-99D723367C66.png

dmwwebartisan
Shopify Partner
12280 2546 3694

@Winslows_Loft 

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Winslows_Loft
Tourist
7 0 1

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
Shopify Partner
12280 2546 3694

@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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Winslows_Loft
Tourist
7 0 1

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?

 

IMG_9408.PNG

oscprofessional
Shopify Partner
15830 2369 3072

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;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Winslows_Loft
Tourist
7 0 1

Almost hahaha

2FB2E04F-44A1-403A-AE22-232A365606E1.png

Winslows_Loft
Tourist
7 0 1

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

Zworthkey
Shopify Partner
5581 642 1565

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
Tourist
7 0 1

Nothing has changed with this code