Html Question posted in
Some basic documentation can be found here.

Html – CSS Display None or Visibility Isn't Working

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

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search