Css3 Media Query not working with max-width

css, media-queries

Solution

With your current `max-width`media 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!

Problem

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.

Original source