I'm tasked with making a small update to an existing widget on a dashboard-style website. The current widget looks great on larger screens but terrible on smaller devices. I'm trying to add a few CSS rules that should only be applied when the width of the display is at or below 768px.
I have worked with responsive design a bit using Bootstrap. I haven't had to roll-my-own @media queries.
Here is the CSS...
@media (max-width: 768px) { // Bootstrap sm.
#sidenav { position: static; text-align: center; }
#sidenav .primary-systems li {
display: inline-block;
width: auto;
}
}
/* Stuff I added above; stuff I inherited below */
#sidenav { width:265px; background-color: #fff; position: relative; left: -44px; top: 16px; border: 1px solid #000; padding: 8px 0; }
#sidenav ul { margin: 0; padding-left: 0; }
#sidenav div.hr { border-bottom: 1px dotted #353535; margin: 0 auto 15px auto; }
#sidenav li { list-style-image: none; list-style-type: none; margin-left: 0; }
#sidenav li a { white-space: nowrap; display: block; width: 170px; height: 50px; padding-left: 80px; font-family: 'lato'; font-weight: 400; line-height: 50px; font-size: 18px; color: #353535; text-decoration: none; background: transparent url("/jasig-widget-portlets/images/icons/sidenav.png") no-repeat 15px 0; }
#sidenav li a:hover { background-color: #f3f3f3; }
#sidenav .angel a { font-family:'Lato', sans-serif; background-position: 15px 0; }
#sidenav .web-advisor a { font-family:'Lato',sans-serif; background-position: 15px -50px; }
#sidenav .tartan-card a {font-family:'Lato',sans-serif; background-position: 15px -100px; }
#sidenav .course-schedule a {font-family:'Lato',sans-serif; background-position: 15px -150px; }
#sidenav .directory a {font-family:'Lato',sans-serif; background-position: 15px -200px; }
#sidenav .faq a {font-family:'Lato',sans-serif; background-position: 15px -250px; }
#sidenav .help-desk a {font-family:'Lato',sans-serif; background-position: 15px -300px; }
#sidenav .financial-aid a {font-family:'Lato',sans-serif; background-position: 15px -350px; }
#sidenav .transcripts a {font-family:'Lato',sans-serif; background-position: 15px -400px; }
#sidenav .important-dates a {font-family:'Lato',sans-serif; background-position: 15px -450px; }
#sidenav .semesters a {font-family:'Lato',sans-serif; display: none; }
#sidenav .banner { margin: 15px auto 15px 30px; }
#sidenav .support {font-family:'Lato',sans-serif; margin-top: 15px; padding-left: 20px; }
#sidenav p.secure {font-family:'Lato',sans-serif; margin: 20px; }
#sidenav p.server { margin-left: 24px; }
The chrome dev tools show the current version of this file in the Sources tab (not a cache problem). The inherited CSS rules are working; the lines I added have not effect. They don't even show up in the list of overridden rules when you look at the elements in Chrome dev tools.
Can anyone see what I'm missing?
Move your media query below the inherited rules. The CSS parser will apply any rules that apply as it parses the document in order. You need your overrides to be parsed after the base rules.
Update: As a side note, CSS doesn't support // comments, so the parser may be getting confused by // Bootstrap sn.. At least your text-align and .primary-systems rules should be applied even with the current ordering.