I have a list of links that are horizontal on the homepage of my site. However, while making the site responsive once the screen gets too small, like for mobile devices I want to change it to where the links are now stacked as a block so they’re displaying vertically. So in my HTML I have the links written twice. One its default display which is horizontal, but then one for when it goes to mobile which is vertical. This is where the display: none; and visibility: hidden; comes in. However, it’s not working. Below is my HTML and CSS code:

<a href="https://charismahomedecor.com/product-category/vases">Vases</a> | <a 
href="https://charismahomedecor.com/product-category/pillows">Pillows</a> | <a 
href="https://charismahomedecor.com/product-category/switch-plate-covers">Switch 
Plate Covers</a> | <a href="https://charismahomedecor.com/product- 
category/ornaments">Ornaments</a>

<div id="promo-links">
<ul>
<li><a href="https://charismahomedecor.com/product-category/vases">Vases</a></li>
<li><a href="https://charismahomedecor.com/product-category/pillows">Pillows</a></li>
<li><a href="https://charismahomedecor.com/product-category/switch-plate- 
covers">Switch Plate Covers</a></li>
<li><a href="https://charismahomedecor.com/product-category/ornaments">Ornaments</a> 
</li>
</ul>
</div>

CSS:

#promo-links {visibility: hidden;} // This is to hide the mobile version while you're 
on a desktop or iPad.

CSS to show on mobile:

@media (max-width: 324px) {
rs-layer#slider-5-slide-6-layer-7.rs-layer {display:none;    
                                         }
#promo-links {visibility: visible !important;
             display: block !important;
             }
}

Nothing’s working. The unordered list of items aren’t displaying in the mobile version. The visibility or display styling isn’t allowing it to show.

Link to live version of site: https://charismahomedecor.com