Debut theme - make slideshow fullscreen on mobile

Solved
DMarie1994
Tourist
5 1 0

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!  

IMG_1878.PNG

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!

 

 

0 Likes
24by7themes
Navigator
310 46 46

Give

@media only screen and (max-width:767px) {
.slideshow--medium {height: 100vh;}
}
Expert Shopify Developer hire me
Still not satisfied!!! / are you required any custom development? contact me
Is it good solution? Yes, please Like.
0 Likes
DMarie1994
Tourist
5 1 0

Unfortunately, that hasn't worked

0 Likes
24by7themes
Navigator
310 46 46

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

Expert Shopify Developer hire me
Still not satisfied!!! / are you required any custom development? contact me
Is it good solution? Yes, please Like.
0 Likes

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes

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.


◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
DMarie1994
Tourist
5 1 0

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

 

IMG_1967.PNG

 

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

0 Likes

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 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes