[link]http://ramadaan.rocks/test.html?nocache=1
somehow broke media query. trying make nav , when under 600px, media query seems not working.
so media query being broken? nav long? many list items?
any help? thanks,
.nav ul { list-style: none; background-color: #000; text-align: center; padding: 0; margin: 0; }
.nav li { font-family: 'francois one', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 40px; height: 40px; /* line-height , height set @ same value centers content vertically in middle */ border-bottom: 1px solid #888; color: #fff; }
.nav { text-decoration: none; color: #fff; display: block; transition: .3s background-color; }
.nav a:hover { background-color: #e17143; }
.nav a.active { background-color: #fff; color: #e17143; cursor: default; }
@media screen , (min-width: 600px) { .nav li { width: 120px; border-bottom: none; height: 50px; line-height: 50px; font-size: 14px; } }
.nav li { float: left; }
.nav ul { overflow: auto; width: 600px; margin: 0 auto; }
.nav { background-color: #444; }
<div class="nav"> <nav> <ul> <li><a class="active" href="#">home</a></li> <li><a href="#">what ramadan?</a></li> <li><a href="#">how fast?</a></li> <li><a href="#">who can fast?</a></li> <li><a href="#">prophetic commentary</a></li> <li><a href="#">tarawih prayer</a></li> <li><a href="#">30 ajza' of qur'an</a></li> <li><a href="#">commonly asked questions</a></li> <li><a href="#">contact</a></li> </ul> </nav>
