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
10710 2338 3314

@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 | Bag is a cart drawer that maximizes your sales. View 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

Winslows_Loft
Tourist
7 0 1

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

Zworthkey
Shopify Partner
5581 640 1498

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.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
dmwwebartisan
Shopify Partner
10710 2338 3314

@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 | Bag is a cart drawer that maximizes your sales. View app →
Winslows_Loft
Tourist
7 0 1

Nothing has changed with this code

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
10710 2338 3314

@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 | Bag is a cart drawer that maximizes your sales. View 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
11006 1758 2234

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;
}
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Winslows_Loft
Tourist
7 0 1

Almost hahaha

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