My media query is working for this navigation but on my mobile device it's not working when I tried it on Safari.
On the snippet it is working, but after I've opened the file from my iPhone the media query isn't working.
Another small concern, the black border in the snippet isn't spanning the full width but I hope that's not too much of an issue.
Link: https://www.dropbox.com/s/vhp8lhjzh0l9tuh/examplezip.zip?dl=0
#nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
margin: 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
background-color: orange;
}
* {
margin: 0;
}
body {
background-color: #F0ECCA;
}
html,
body {
height: 100%;
}
html,
body {
height: 100%;
}
#nav li a {
color: white;
margin: 15px;
padding: 20px;
display: block;
;
text-decoration: none;
font-size: 24px;
font-family: courier;
}
#nav li {
list-style: none;
}
#nav ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
margin: 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
@media all and (max-width: 900px) {
#nav {
flex-direction: column;
/*updated*/
margin-bottom: 7%;
}
#nav ul {
padding-left: 0;
/*added*/
}
#nav li {
flex: 1 1 100%;
/*updated*/
padding: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav li a {
text-align: center;
padding: 5px;
margin: 5px;
}
}
@media (min-width: 900px) and (max-width: 1100px) {
#nav {
justify-content: space-around;
}
.container {
width: 100%;
}
}<nav>
<div id="nav">
<ul>
<li> <a href="#">Calendar </a> </li>
<li> <a href="#">Events </a> </li>
<li> <a href="#">Hours </a> </li>
<li> <a href="#">Contact </a> </li>
<li> <a href="#">About </a> </li>
</ul>
</div>
</nav>
