display:block not working using media query

Question

I'm working on an assignment using media queries, and encountered an issue when I try to make the navigation bar of my website vertical for smaller screens.

I was expecting the each of the navigation links to take up a row, but instead they all stay on one row.

nav {
  position: fixed;
  z-index: 1000;
  top: 0px;
  text-align: center;
  background-color: #eedfd4;
  margin: auto;
  width: 99%;
  padding: 5px;
  border-radius: 7px;
}

nav li {
  list-style-type: none;
  width: 10%;
  text-align: center;
  border-radius: 5px;
  margin: 8px;
  padding: 6px;
  background-color: #D5BDAF;
  transition: background-color 1s;
}

nav li:hover {
  background-color: #d6b19b;
}

nav a {
  text-decoration: none;
  color: #876244;
}

@media screen and (max-width:759px) {
  fig {
    width: 100%;
  }
  footer {
    width: 100%;
  }
  nav li {
    display: block;
  }
  .himg {
    display: none;
  }
}

@media screen and (min-width:760px) {
  body {
    background-color: #cab9afc1;
  }
}

<nav>
  <ul>
    <li><a href=../index/index.html>Homepage</a></li>
    <li><a href=../about/about.html>About Us</a></li>
    <li><a href=../locations/locations.html>Locations</a></li>
    <li><a href=../recommended/recommended.html>Reccomended</a></li>
    <li><a href=../apply/apply.html>Apply</a></li>
    <li><a href=../contact/contact.html>Contact Us</a></li>
  </ul>
</nav>

score 0 · Answer 1 · answered Dec 22 '22 at 16:29

0

I hope this will help you.

nav li {
    list-style-type: none;
    width: 10%;
    text-align: center;
    border-radius: 5px;
    margin: 8px;
    padding: 6px;
    background-color: #D5BDAF;
    transition: background-color 1s;
    display: inline;
}

@media screen and (max-width:759px) {
    nav li {
        display: block;
    }
}

answered Dec 22 '22 at 16:29

Challenge Win

114
5

Hey, thanks a lot but all this did was ensure that the text didn't flow out of it's background - it didn't make each of the links take up a row. Thanks though, it did make my website look a bit better. – Nishka S Dec 22 '22 at 16:35
Then you need to change width like this. min-width: 120px; – Challenge Win Dec 22 '22 at 17:06

score 0 · Answer 2 · answered Dec 22 '22 at 16:40

If you use display: flex you can control if the elements display as a row or column in your media query. See the annotated example below:

/* added this to even up the right margin on the li items at low screen sizes */
* {
box-sizing:border-box;
}

nav {
  position: fixed;
  z-index: 1000;
  top: 0px;
  text-align: center;
  background-color: #eedfd4;
  margin: auto;
  width: 99%;
  padding: 5px;
  border-radius: 7px;
}

/* added this to make the container a flex box and removed the padding-left that appears on all ul items */
nav ul {
  display: flex;
  padding-left:0;
}

nav li {
  list-style-type: none;
  /* removed this --> width:10% as it makes the text overflow the li element */
  text-align: center;
  border-radius: 5px;
  margin: 8px;
  padding: 6px;
  background-color: #D5BDAF;
  transition: background-color 1s;
}

nav li:hover {
  background-color: #d6b19b;
}

nav a {
  text-decoration: none;
  color: #876244;
}

@media screen and (max-width:759px) {
  fig {
    width: 100%;
  }
  footer {
    width: 100%;
  }
  
  /* added this, stacks each li element on top of each other. The default is 'row' */
  nav ul {
    flex-direction: column;
  }
  .himg {
    display: none;
  }
}

@media screen and (min-width:760px) {
  body {
    background-color: #cab9afc1;
  }
}

<nav>
  <ul>
    <li><a href=../index/index.html>Homepage</a></li>
    <li><a href=../about/about.html>About Us</a></li>
    <li><a href=../locations/locations.html>Locations</a></li>
    <li><a href=../recommended/recommended.html>Reccomended</a></li>
    <li><a href=../apply/apply.html>Apply</a></li>
    <li><a href=../contact/contact.html>Contact Us</a></li>
  </ul>
</nav>

score 0 · Answer 3 · answered Dec 22 '22 at 17:39

A Complete solution for you using flexbox with good responsiveness :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object</title>
    <!-- GOOGLE MATERIAL ICONS FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" rel="stylesheet" />
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'Poppins', 'system-ui', 'sans-serif';
    font-weight: 300;
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: #e2e2e2; 
}
::-webkit-scrollbar-thumb {
    background: #9a9a9a; 
}
::-webkit-scrollbar-thumb:hover {
    background: #b6b6b6; 
}
body {
    margin: 0;
}
a {
    min-width: fit-content;
    font-weight: 500;
    color: white;
}
/* Whole body */
#wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
/* Navigation flex (set in #wrapper) height size to auto */
#wrapper > nav {
    max-width: 100vw;
    flex: 0 0 auto;
    padding: 0 10px;
    background: black;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Main Content flex (set in #wrapper) height size to auto (to fullfil page) GROWING in a flexbox */
#wrapper > section {
    flex: 1 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
/* Controls navigation direction (row , column) */
#wrapper > nav > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}
/* Desnecessary Styling */
#wrapper > nav > ul > li {
    min-width: fit-content;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    border-radius: 100%;
    background: #ffffff96;
}
#wrapper > nav > ul > li a {
    display: none;
}
/* TOOGLE DEVICES */
@media screen and (min-width:760px) {
    body {
    background-color: #cab9afc1;
    }
    #wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    }
    #wrapper > nav {
    padding: 0 !important;
    margin: 10px;
    background: transparent !important;
    overflow-y: hidden !important;
    overflow-x: scroll !important;
    }
    #wrapper > nav > ul {
    flex-direction: row;
    gap: 8px !important;
    }
    #wrapper > nav > ul > li {
    border-radius: 0 !important;
    background: black !important;
    }
    #wrapper > nav > ul > li a {
    display: block !important;
    }
    ._icon {
    font-size: 18px !important;
    color: white !important;
    }
}
._icon {
    font-size: 22px;
    padding: 8px;
    color: black;
}
</style>
</head>
<body>
    <div id="wrapper">
        <nav>
            <ul>
              <li><span class="_icon material-symbols-outlined">&#xe88a;</span><a href=../index/index.html>Homepage</a></li>
              <li><span class="_icon material-symbols-outlined">&#xf8ea;</span><a href=../about/about.html>About Us</a></li>
              <li><span class="_icon material-symbols-outlined">&#xe55b;</span><a href=../locations/locations.html>Locations</a></li>
              <li><span class="_icon material-symbols-outlined">&#xe55a;</span><a href=../recommended/recommended.html>Reccomended</a></li>
              <li><span class="_icon material-symbols-outlined">&#xe174;</span><a href=../apply/apply.html>Apply</a></li>
              <li><span class="_icon material-symbols-outlined">&#xe649;</span><a href=../contact/contact.html>Contact Us</a></li>
            </ul>
        </nav>
        <section>SECTION</section>
    </div>
</body>
</html>

display:block not working using media query

3 Answers3