Solved

Debut theme - make slideshow fullscreen on mobile

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!

 

 

Accepted Solution (1)
DMarie1994
Tourist
5 1 0

This is an accepted solution.

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);

 

View solution in original post

Replies 17 (17)

24by7themes
Shopify Partner
400 61 79

Give

@media only screen and (max-width:767px) {
.slideshow--medium {height: 100vh;}
}
Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
DMarie1994
Tourist
5 1 0

Unfortunately, that hasn't worked 😞

24by7themes
Shopify Partner
400 61 79

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

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

diego_ezfy
Shopify Partner
2935 562 883

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.


◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

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

diego_ezfy
Shopify Partner
2935 562 883

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 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

DMarie1994
Tourist
5 1 0

This is an accepted solution.

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);

 

sleeksetups
Visitor
1 0 1

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
Explorer
55 0 23

@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
Visitor
1 0 0

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

ttan
Excursionist
27 0 4

Hi @diego_ezfy 

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

filled screen but not responsive.png

 

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

did not fill screen but is mobile responsive.png

appreciate your help, thanks a lot. 

ttan
Excursionist
27 0 4

hi @Hardik29418 ,

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

pinkgalorellc
Visitor
1 0 0

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.

ttan
Excursionist
27 0 4

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.