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=512e15c17047a2e0487cdc1e9752304ed9968081f1e8267b719cdb6aa42d6750

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-page-Mobile/td-p/813126

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

[DMarie1994]

I didn’t manage to make that work but thank you for your help!

I actually found the solution by looking at the slideshow code. Max-height was set to 80vh! Changed to 100vh & adapt to first image on slideshow

.slideshow {
  position: unset;
  overflow: hidden;
  margin-bottom: 0;
  max-height: 100vh;
  transition: height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);

[ttan]

Hi @diego_ezfy

do you know how can i make the image fit into the mobile screen without cropping any elements from the image?

i have added the code you shared but the image looks very small.

appreciate your help, thanks a lot.

[ttan]

hi @Hardik29418 ,

will you be able to advise on my enquiry? thank you.

[ttan]

hi @24by7themes ,

i have a similar issue as the enquiry above.

will you be able to make the Debut theme fit fullscreen on mobile and is mobile responsive?

if yes, i can add you as a staff and give you access to the themes at my store.

my store url is ebike.sg. thank you.

[pinkgalorellc]

Hello, I’m also having trouble with making the slideshow bigger on the mobile screen, I used the same code that was presented in the description, but that does not work. Do you have any tips that can help me out? Also I need some help on my home page images width and my collection page height.

[sleeksetups]

Could you let me know in which file this is. I’m having the same problem and am looking at my website code through Shopify. I looked but can’t find this part, so could you please help direct me?

[RSS]

@DMarie1994 Hey, I am trying to solve the same problem you had. I am struggling to find where the code is so I can change to 100vh aswell. Can you help which section it is in please?

[yooforea]

I tried that on my debut theme by adding the code in theme.css but it didn’t work : (