Carousel disappears on mobile devices

I have a perplexing problem… my homepage’s carousel disappears when viewed on mobile devices. I cannot figure out what I’m doing wrong to cause this. The only difference between this and others I’ve made is that I’m using an image overlay that has a z-index assigned to it. The overlay does display, however.

Here’s the URL: https://nittanyleathernecks.com

Any ideas how to fix this?

Hint: You should check the css here …

Thanks @Emmanuel
I’m not familiar with using CSS for this class… what syntax should I use to fix this line so the carousel displays on mobile devices?

Hi @randyrie,
The CSS that @Emmanuel pointed out is setting the display value to “none”. There are three different display properties being set through classes.

  1. d-none : hides on all screen sizes
  2. d-sm-none: hides at the small breakpoint and below
  3. d-md-block: displays on medium and above

I’m guessing you want display from small up? The classes would be .d-none .d-sm-block
Looking at the parent div you are going to have the same issue. Take out the .d-sm-none and replace it with .d-sm-block and get rid of the .d-md-block


Cheers,
Bob
1 Like