I've been working on adjusting my menu for different screen resolutions using media queries. However, I'm facing some issues specifically between 1025 and 1441 pixels (or higher) where the font size is not changing as expected when I resize the browser window.
If you'd like to see what I mean, here's a screenshot: (I know images aren't always preferred, but just in case it helps)
To take a look at my code, you can visit this link: http://codepen.io/anon/pen/dPVzaW
HTML
<div id="cssmenu">
<ul>
<li class='active'><a href='/book/<?php echo $url; ?>'><span>Page details</span></a></li>
<li><a href='/details/<?php echo $url; ?>'><span>Book details</span></a></li>
<li><a href='/comments/<?php echo $url; ?>'><span>Comments</span></a></li>
<li><a href='/suggestions/<?php echo $url; ?>'><span>Suggestions</span></a></li>
<li><a href='/lists/<?php echo $url; ?>'><span>Lists</span></a></li>
<li><a href='/inculture/<?php echo $url; ?>'><span>In culture</span></a></li>
<li><a href='/cover-images/<?php echo $url; ?>'><span>Cover images</span></a></li>
</ul>
</div>
CSS
#cssmenu {
width: 55%;
}
#cssmenu ul {
width: 100%;
border-radius: 3px;
padding: 0;
list-style-type: none;
position: relative;
display: block;
font-size: 0.8em;
font-weight: bold;
background-color: #6A5546;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #353535;
zoom: 1;
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu li {
display: block;
float: left;
margin: 0;
padding: 0 4px;
}
#cssmenu li a {
display: block;
float: left;
color: #b4aaa2;
text-decoration: none;
font-weight: bold;
padding: 10px 20px 7px 10px;
border-bottom: 3px solid transparent;
}
#cssmenu li a:hover {
color: #FFFFFF;
border-bottom: 3px solid #00b8fd;
}
#cssmenu li.active a {
display: inline;
border-bottom: 3px solid #00b8fd;
float: left;
margin-left: 1px;
}
@media screen and (min-width: 1025px) and (max-width: 1441px) {
#cssmenu {
width: 57%;
}
#cssmenu ul {
width: 100%;
border-radius: 3px;
padding: 0;
list-style-type: none;
position: relative;
display: block;
font-size: 0.8em;
font-weight: bold;
background-color: #6A5546;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #353535;
zoom: 1;
}
#cssmenu ul li a {
}
}