How can I hide the slideshow on mobile for the Debut theme?

Store Design
1

Hi,
I hope you’re well.
I would like to make the slideshow on my website invisible on the mobile version, so that you only see it on the desktop and not on the mobile version.
I have already tried quite a lot of code, but unfortunately nothing has worked.

URL: https://alpha-art.eu/
Password: AlphaArt8123
Theme: Debut

Many thanks for any help!
Jojo

2

Hi,

Try the code below.

Add the code in Assets/theme.css

@media screen and (max-width: 640px) {
  .main-content .shopify-section:first-child {
    display: none !important;
  }
}

Hope it helps.

Thanks.

3

@DavidEKim

Thanks for the answer!
Unfortunately, the first unit, i.e. the first image with the text superimposed on it, is now no longer visible on mobile, although the slideshow is still visible.

4 
@media screen and (max-width: 640px) {
  .main-content .shopify-section:first-child {
    display: none !important;
  }
  div#shopify-section-hero-1 {
    display: none !important;
  }
}

Please try this.

Thanks.

5

@DavidEKim

Unfortunately, the same thing still happens, so the first element of the website (image with button and text) is no longer displayed on mobile, while the slideshow is still visible.

6

I still see the class & id values are “display: inherit;” not “display: none;”.

Please add the code to your Assets / theme.scss.liquid (Actions > Edit code > Assets).

@media screen and (max-width: 640px) {
  .hero--x-large, div#shopify-section-hero-1, .main-content .shopify-section:first-child {
    display: none !important;
  }
}

20220619_190620.png
20220619_190620.png1395×752 64.8 KB

Hope it works.

If you were unable to fix it, please send me a private message.

Thanks.

7

I don’t have a theme.scss.liquid file, but I have placed the code in the area of the theme.css file visible in the screenshot. Unfortunately, nothing has changed, the slideshow is visible and the first element of the website is hidden on mobile.

The code looks like the first element of the website is hidden (“shopify-section:first-child”).
Could this be the problem?

8

Hi,

I checked your store and the slideshow (the first element) is visible on PC and hidden on Mobile.

I though that’s what you want. I’m not sure what exactly you are looking for.

Are you trying to hide something else on Mobile?

9

@DavidEKim

The slideshow is an element where several images are shown one after the other, isn’t it?
The slideshow I’m talking about looks like this (picture in attachment) and it’s in the second to last area on the website.
I would like to make this slideshow invisible on the mobile version.

10

@Jojo1610

The slideshow is an element where several images are shown one after the other, isn’t it?

→ That’s correct but many people are using only one image with slideshow without image rotation and the first big image for slideshow.

However, to hide the slideshow which you wanted to on mobile, please use the code below.

@media screen and (max-width: 640px) {
  div#SlideshowWrapper-1628957595a0c2a16a {
    display: none !important;
  }
}

Hope it helps.

Thanks.

11

@DavidEKim

All right, I understand.
Thank you very much!
Now the pictures are already gone. Unfortunately, the buttons to switch between the pictures are still visible. Is there perhaps also a solution for this?