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
9829 2237 3078

@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
2571 309 641

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.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dmwwebartisan
Shopify Partner
9829 2237 3078

@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
9829 2237 3078

@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