Debut theme - make slideshow fullscreen on mobile

[DMarie1994]

Hi guys, I'm having some trouble with the slideshow and getting it fit the full screen on mobile. I'm using the Debut theme with the slideshow as the first section. I've managed to use some code to get it the way I want (no arrows/buttons etc) this is the last piece of the puzzle so I'd really appreciate some help!  

As you can see from the image it cuts off before filling the screen. I'd also really like it to be responsive on all mobile screens if that's possible.

It's worth mentioning I've already tried the piece of code I found on a similar thread and it doesn't work for me:

@media only screen and (max-width:767px) {
.slideshow--medium {height: 650px;}
}

Thanks!

[24by7themes]

Give

@media only screen and (max-width:767px) {
.slideshow--medium {height: 100vh;}
}

[DMarie1994]

Unfortunately, that hasn't worked

[24by7themes]

Okay, I have to look in your code. add me as staff (info@creatpix.com) in your store.

[diego_ezfy]

Hello,

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

[DMarie1994]

https://smoomskin.myshopify.com/?fts=0&key=512e15c17047a2e0487cdc1e9752304ed9968081f1e8267b719cdb6aa...

It's the homepage.

Thanks!

[diego_ezfy]

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width:767px){
.slick-initialized .slideshow__image {
    background-size: contain !important;
    max-height: 490px !important;
}
}

I reckon that this would be your best bet in this case.
You can play around with this code by:

1. Changing the 490px to something else and seeing how it fits
2. Remove entirely the max-height: 490px !important; line

Let me know whether it works please.

[diego_ezfy]

Also slightly off-topic, but I have coded a swipe slider for Debut theme specifically exclusively for this community, I believe it could benefit you.

It takes around 20 seconds to install the code and it can improve your UX and, subsequently, sales.

Here it is:https://community.shopify.com/c/Shopify-Design/Debut-Theme-Solution-to-swipe-images-on-the-product-p...

Kind regards,
Diego

[DMarie1994]

I've tried the code and it looks like this: 

Then the other 2 slides are like the previous post image. I've also tried the 2 other steps & it's still the same

[diego_ezfy]

This code forces the image to occupy all space without affecting its aspect ratio, thence why the gray borders. 

A better solution would be to edit the images on photoshop making sure all of them have the same height and width to avoid making them looking uneven - popular websites tend to manage their sliders this way.

Kind regards, 

Diego