Hiding slideshow to display different images on desktop and mobile

[michaelafolabi9]

Hi, i want to make sure that my desktop and mobile slideshows are different. is there a custom css code that can help hide the slideshow i don’t want to show on each device?

[TheUntechnickle]

Hey @michaelafolabi9 ,

Yes, you can use custom CSS to hide specific slideshows on different devices by targeting them with media queries. Here’s how you can do it:

1. Identify the Slideshows: First, identify the unique identifiers (IDs or classes) of the slideshows you want to hide on different devices. For example, let’s assume you have two slideshows with the following classes:

   • desktop-slideshow for the desktop version.

   • mobile-slideshow for the mobile version.

2. Add Custom CSS: Add the following CSS code to your theme’s stylesheet(theme.css or base.css). This code will hide the desktop slideshow on mobile devices and the mobile slideshow on desktop devices.

Custom CSS Code

/* Hide desktop slideshow on mobile devices */
@media (max-width: 767px) {
  .desktop-slideshow {
    display: none;
  }
}

/* Hide mobile slideshow on desktop devices */
@media (min-width: 768px) {
  .mobile-slideshow {
    display: none;
  }
}

- Desktop Slideshow: The desktop-slideshow class will be hidden on devices with a screen width of 767 pixels or less (typically mobile devices).

• Mobile Slideshow: The mobile-slideshow class will be hidden on devices with a screen width of 768 pixels or more (typically desktop devices).

Adding the CSS to Your Theme1. Access Your Theme: Go to your Shopify admin panel, navigate to Online Store > Themes.

1. Edit Code: Click on Actions > Edit code for the theme you are using.

2. Add CSS: Open the assets folder and find the main CSS file (e.g., theme.css or base.css). Add the above CSS code to this file.

3. Save and Publish: Save your changes and publish the theme if necessary.

Here’s an example of how your HTML might look with the two slideshows:

<div class="desktop-slideshow">
  <!-- Desktop slideshow content -->
</div>

<div class="mobile-slideshow">
  <!-- Mobile slideshow content -->
</div>

Hope this helps. If you can share your slideshow code in detail I can tweak the CSS further to match your requirements

Cheers!
Shubham | Untechnickle

[Dan-From-Ryviu]

Hi @michaelafolabi9

What theme are you using? If you use a Shopify’s free theme, follow this instruction.

Add this code to Custom CSS of the desktop slideshow to hide it on mobile

@media (max-width: 749px) {
slidehow { display: none; }
}

And this code to mobile slideshow to hide it on desktop

@media (min-width: 750px) {
slidehow { display: none; }
}

[EstherBui]

Hi @michaelafolabi9

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find filebase.css or theme.css and add this code at the end of the file

.slideshow { 
   display: none !important; 
}

Best,

Esther

[michaelafolabi9]

this doesn’t work for me not sure why though!

[michaelafolabi9]

Hi Shubham,

how do i find the slideshow ID?

this is my site currently

https://p49pur-te.myshopify.com/

pass: Sample2016

[michaelafolabi9]

Still doesnt work. i currently have two slide show set up one for desktop and one for mobile

this is my site currently

https://p49pur-te.myshopify.com/

pass: Sample2016

[LizHoang]

Hi @michaelafolabi9 i see it look good

[Dan-From-Ryviu]

Make sure you create two slideshow sections and add code to each Custom CSS of each section

Add this code to Custom CSS of desktop slideshow section

@media (max-width: 749px) {
slideshow-component { display: none; }
}

Add to Custom CSS of mobile section

@media (min-width: 750px) {
slideshow-component { display: none; }
}

[michaelafolabi9]

Still having same issue. see below screenshot

[Dan-From-Ryviu]

Did you click the Save button after adding the code? Also, make sure you add code to the correct sections

[michaelafolabi9]

Yes i did that, so not really sure anymore. Nothing actually disappears.

[Dan-From-Ryviu]

Could you give me your collab request code so I can access your theme and check?

[michaelafolabi9]

9123

[michaelafolabi9]

9123

[Dan-From-Ryviu]

Request sent!

[Dan-From-Ryviu]

Hi @michaelafolabi9

It’s worked now. You edited slideshow.liquid file and caused something issue with this file that caused the issue that customize CSS code is not applied. I revert the file to original version to solve it.

[michaelafolabi9]

thanks for fixing it!!

[Dan-From-Ryviu]

You are very welcome!