CSS Display None or Visibility Isn't Working

Question

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:

#promo-links {
  visibility: hidden;
}

@media (max-width: 324px) {
  rs-layer#slider-5-slide-6-layer-7.rs-layer {
    display:none;
  }

  #promo-links {
    visibility: visible !important;
    display: block !important;
  }
}

<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>

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

Answer 1

use

@media only screen and (max-width: 600px) {
  .promo-links {display:block}
}

Answer 2

You should actually solve the whole thing with CSS. So there is no need to show or hide things. Currently you seem to have duplicate code, just to handle regular and mobile view.

You could go for this here instead

/* mobile view */
/* ... put your mobile style css here ... */

@media (min-width: 324px) {
  /* basic view */
  #promo-links ul li {
    display: inline;
  }
  #promo-links ul li::after {
    content: " ";
    word-spacing: 1em;
    background-image: linear-gradient(
      -0.25turn,
      transparent 0 calc(50% - 0.03em),
      currentcolor 0 calc(50% + 0.04em),
      transparent 0
    );
  }
  /* ... put more basic style css here or above in this media point... */
}

<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>

This is by the way a mobile first approche. I would recommend you to do this in your projects. Even nicer would be using scss or less. But this is more like a preference.

Answer 3

After looking to the production link, the problem is that you are hiding the container of both

rs-layer#slider-5-slide-6-layer-7.rs-layer {
  display:none;
}

That div contains #promo-links and <a> tags and you are hiding it, so neither of the links will show up on small screens.

First you have to group <a> tags:

<div id="promo-links-lg">
  <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>

Now show/hide #promo-links and #promo-links-lg depending on the screen size.

Good to know, visibility will only show/hide while reserving the space in the layout, in your case, it's better to use display

#promo-links {
  display:none;
}
@media (max-width: 324px) {
  #promo-links {
    display: block;
  }
  #promo-links-lg {
    display: none;
  }
}

<div id="promo-links-lg">
  <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>

<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>