# Carousel disappears on mobile devices

**URL:** <https://forum.pinegrow.com/t/carousel-disappears-on-mobile-devices/4164>\
**Category:** Support Forum Feedback\
**Created:** [May 22, 2020, 5:11pm UTC](https://forum.pinegrow.com/t/carousel-disappears-on-mobile-devices/4164 "2020-05-22T17:11:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [May 22, 2020, 5:11pm UTC](https://forum.pinegrow.com/t/carousel-disappears-on-mobile-devices/4164/1 "2020-05-22T17:11:05Z")

</div>

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](https://nittanyleathernecks.com)

Any ideas how to fix this?

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [May 22, 2020, 5:30pm UTC](https://forum.pinegrow.com/t/carousel-disappears-on-mobile-devices/4164/2 "2020-05-22T17:30:31Z")

</div>

Hint: You should check the css here …

 ![2020-05-22_19-28-20](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f69ab7973f8c5fd0f14cc0b4e2bdefe558667da4.jpeg)

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [May 25, 2020, 6:04pm UTC](https://forum.pinegrow.com/t/carousel-disappears-on-mobile-devices/4164/3 "2020-05-25T18:04:31Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [May 25, 2020, 7:36pm UTC](https://forum.pinegrow.com/t/carousel-disappears-on-mobile-devices/4164/4 "2020-05-25T19:36:49Z")

</div>

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

> **[Display property](https://getbootstrap.com/docs/4.0/utilities/display/)**
>
> Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

  
Cheers,  
Bob