CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Drew Wills
Drew Wills

Reputation: 8446

CSS media query rules not being applied

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?

Upvotes: 0

Views: 247

Answers (2)

zzzzBov
zzzzBov

Reputation: 179046

Your selectors are being overridden by other selectors with the same specificity that occur after the selectors in the media query.

You can learn more about how the cascade works in css in the w3c docs.

The quick solution is to move your media queries below your other selectors.

Upvotes: 1

Brandon Gano
Brandon Gano

Reputation: 6710

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.

Upvotes: 1

Related Questions