Media queries for logo in design practicum header not kicking in

[GandalfvanDyck]

Hey guys,

Im working on my HubSpot Design Certification practicum.

I need to have a media query which effects a module when the screen is 320px or less.

The query should apply on an image module classed ".top-banner".

My code:

@media screen and (max-width: 320px){
    .top-banner{ 
        display: none;
    }
}

I have no clue why this is not working, I put it at the bottom of my stylesheet and the writing should be correct...

Could anyone help me out, this is my last hurdle before I can upload it I think! 🙂

[ndwilliams3 · Accepted solution]

You media query looks correct. Use the Element inspector in Firefox or Chrome to see if another CSS declaration is taking precedence.

for instance if you had other CSS like...

.some-other-class .top-banner{ 
        display: block;
    }

it would be overriding your media query.

[GandalfvanDyck]

Hi,

I understand that one might be blocking or overriding my query, but then why is this something I need to be able to do in my "test", it seems most things were focussed on the course material and this developer tool in chrome etc not spoken about in the course thus making this somewhat of a weird, unfitting question/test.

Ill look at what media query is blocking mine, what is the best way to fix this if that is the case? add !important?

[ndwilliams3]

The inspector tool in Chrome is an easy way to troubleshoot CSS. For anyone new to web development, it's a great tool to have in the bag. 

If it is in fact a blocking issue, then yes, you could add !important or you can add additional parent classes to make it more specific. I try to avoid using !important unless it's absolutely necessary. You wind up with extra CSS as you update your CSS in the future.

@media screen and (max-width: 320px){
  .some-other-class  .top-banner{ 
        display: none;
    }
}