Currently, I am working on making my sidebar fluid so that it adjusts with the browser window size. Everything seems to be going smoothly, except for one issue – when I add a media query to make it responsive, my CSS styling breaks. However, if I remove the query, everything reverts back to the normal styling from my stylesheet. Could someone please review my code and point out what might be causing this problem? Thank you in advance!
On another note, adding an additional closing curly brace to the #rightandoverview media query fixes the styling but disables the fluidity. What could possibly be causing this?"
#righthandoverview {
position: absolute;
top: 91px;
right: 0px;
width: 20%;
height:215px;
background-color: white;
webkit-box-shadow: 0px 4px 5px -5px #777;
-moz-box-shadow: 0px 4px 5px -5px #777;
box-shadow: 0px 4px 5px -5px #777;
}
@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
float: left;
width: 30%;
background-color: yellow;
margin-top: 5px;
}
#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview ul {
float:left;
width:30%;
background-color: yellow;
margin-top: 10px;
}
}
#righthandoverview ul li > a {
display: inline;
text-decoration: none;
color:#8BAFDA;
}
#righthandoverview ul li {
padding-bottom: 6px;
}