Css3 Media Query not working with max-width

Question

I have been trying to hide an element at a max-width of 980px using media queries but for some reason it is still displaying.

If I use a media query with min-width the element disappears but with this code it is still showing and I can figure out why?

@media (max-width: 980px) {
    .welcome-msg  {
        display:none;
    }
}

Can anyone see anything wrong with my code? I'm using FF responsive design view fro testing at the moment.

Answer 1

With your current max-widthmedia query, display:none is going to apply until the document reaches a width of 980px, rather than at 980px.

From your question, it seems like you want the opposite to happen, which is why you've had success with min-width. Switching from max-width to min-width should solve things.

Otherwise, you are going to have to set your element to display: none in your non-media query css, and use display:block in your max-width media query.

CSS

/* Only applies while screen is 980px or less */
@media (max-width: 980px) {
.welcome-msg  {
        display:none;
    }
}

/* only applies while screen is 980px or greater */
@media (min-width: 980px) {
.welcome-msg  {
        display:none;
    }
}

/* if you must use max-width, this is a solution */
/* otherwise, use min-width IMHO */
.welcome-msg  {
        display:none;
}

@media (max-width:980px) {
  .welcome-msg  {
   display:block; /* element will only show up if width is less than or equal to 980px */
  }
}

If that's not what you are trying to accomplish, It would be helpful to have a Codepen example for us to better answer your question.

Good luck!