Slideshow on mobile!

[Leeloo]

Hi there.

I have the Craft theme.

Is there a way to change the height of the slideshow on the mobile only? So it is more portrait than landscape!?

Thanks in advance!

[Dotsquares]

hi @Leeloo

You can adjust the slideshow height on mobile using CSS. By adding a media query, you can set a different height for smaller screens to make it more portrait-oriented.

Here’s an example of the CSS you can use:

@media (max-width: 768px) {
  .slideshow-class {  
    height: 80vh !important; /* Adjust the height as needed */
  }
}

Replace .slideshow-class with the actual class used for your slideshow in the Craft theme. If you’re unsure where to apply this, I’d be happy to guide you through the process!

[Arif_Shopidevs]

can you show the screen shot, it will help us to give the correct soluiton

[Dotsquares]

Problem Solved? Accept and Like solution to help future merchants.

[Leeloo]

Thank you. If you could let me know exactly where I place this that would be great? Also not sure what you mean by ‘actual class’ for my slideshow?

[Arif_Shopidevs]

How to Add This to Shopify Craft Theme:

1. Go to Shopify Admin → Online Store → Themes.
2. Click “Customize” on your Craft theme.
3. In the theme editor, go to “Theme settings” (bottom left).
4. Scroll down and click “Custom CSS”.
5. Paste the above CSS code and save changes.

Alternative (Edit Theme CSS Directly):

1. Go to “Online Store” → “Themes”.
2. Click “Actions” → “Edit code”.
3. Open base.css inside the assets folder.
4. Paste the CSS at the bottom and Save.

[Leeloo]

I’m using the Craft theme!

[Arif_Shopidevs]

Sorry i have updated the theme name. The process is same

[Moeed]

Hey @Leeloo

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @Leeloo

You can do that by adding this code to Custom CSS of your Slideshow

@media (max-width: 749px) {
.slideshow__media { height: 55rem; }
}