Media query not working without !important

media queries overriding each other
media query !important
media query not overriding
media query specificity
media queries not getting applied
media query not taking priority
why doesn t my media query work
media queries troubleshooting

My media query does not override the regular CSS unless I use !important all the time. What's the error? Here you can see the CSS with the !importants. If I remove them, the styling goes back to the regular CSS, even when the screen is less than 850px. Could you please help?

@media all and (min-width: 200px) and (max-width: 850px) {
        html body {
        position: absolute;
        height: 100%;
        width: 100% !important;
        margin: 0 auto;
        text-align:center;
        }
        #header {
        background-color: white;
        position: fixed;
        top: 0px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        width: 95%;
        height: 120px;
        z-index:9999;
        }
        #header-inner{
        width: 100% !important;
        float: right;
        }
        div#title   {
        margin: 0px !important;
        position: absolute; 
        width: 100% !important;
        height: 70px;
        background: url('mobillogo.png'); 
        background-repeat: no-repeat;
        background-size:  auto 70px;

        }
        .wrapper {
        width: 100% !important;
        overflow:auto;
        margin-left: auto;
        margin-right: auto;
        }
        #first {
        padding-top: 150px;
        padding-bottom: 30px;
        overflow:auto;
        width: 95%;
        background-color: #f7fdff;
        height: ;
        }
        #second {
        margin-top: 65px;
        overflow: auto;
        width: 95% !important;
        margin-bottom: 65px;
        background-color: white;

        }
        #third {
        overflow:auto;
        width: 95% !important;
        background-color: #f3efef;
        padding-bottom: 4em;
        }
        #footer
        {
        height: 115px;
        width:100% !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        background-color: white;
        padding-top: 1em;
        padding-bottom: 0.5em;
        }
        #footbox {
        height: 70px;
        width: 100% !important;
        margin-top: 0px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        }
        #contains {
        width: 100% !important;
        margin-top: 50px;


        }
        h1 {
        float: left;
        width: 100% !important;
        margin-top: 2em;
        font-family: Jersey;
        font-size: 3.5em;
        text-align: center; 
        color: #f44336;         
        }

        #logo {
        margin-top:70px !important;
        width: 100% !important;
        height: 70px;
        }
        div#logo img {
        position: static !important;
        height: 13vw !important;

        }
        #footbox {
        height: 70px;
        width: 95%;
        margin-top: 0px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        }
        #checklist {
        overflow: auto;
        position: relative;
        float: left;
        width: 100%  !important;
        font-family: 'Open Sans', sans-serif;
        padding-bottom: 8vh;
        padding-top: 15px;
        text-align:left;

        }
        #short {
            width: 100%  !important;
            color: black;
            font-weight: bold;
            font-size: 1.3em;
            margin: 0px !important;
        }
        #form {
        overflow: auto;
        border-radius: 5px;
        padding: 0px !important;
        position: relative;
        width: 100% !important;
        display: inline-block;
        -webkit-transition:background 0.3s;
        -moz-transition:background 0.3s;
        -o-transition:background 0.3s;
        transition:background 0.3s;
        transition-timing-function: ease-in-out;
        }
        ul.inline {
        width: 100% !important;
        list-style-type: none;
        columns: 1 !important;
        -webkit-columns: 1 !important;
        -moz-columns: 1 !important;
        list-style-position: inside;
        padding: 0px;
        margin: 0px;
    }
    #fulltext {
    width: 90%;
    padding-right: 30px;
    }
    .text {
    width: 75% !important;
    }

}
html body {
position: absolute;
height: 100%;
width: 100%;
margin: 0 auto;
 text-align:center;

}
@font-face { 
font-family: Jersey; src: url('Jersey M54.ttf'); 
} 


p {
font-family: 'Open Sans', sans-serif;
 text-align:left;

}
.lightup {
background-color: #ffc107;
}
button {
    float: right;
    margin-right: 10px;
    font-size: 1.2em;
    background: #5fbd5f;
    color: white;
    padding: 5px;
    font-family: 'Open Sans', sans-serif;
    color: white;
    padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border: 0;
 outline: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}
button:hover {
cursor: pointer; 
cursor: hand;
}
 button:active{
   border: 0;
outline: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);ű
    }
a, u {
text-decoration: none;
}
#header-inner{
width: 1100px;
    float: right;

}
#header {
background-color: white;
position: fixed;
top: 0px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
width: 100%;
height: 120px;
z-index:9999;
}
.wrapper {
overflow:auto;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
#first {

padding-top: 150px;
padding-bottom: 30px;
overflow:auto;
width: 100%;
background-color: #f7fdff;
height: ;
}
#second {
margin-top: 65px;
overflow: auto;
width: 100%;
margin-bottom: 65px;
background-color: white;

}
#third
{
overflow:auto;
width: 100%;
background-color: #f3efef;
padding-bottom: 4em;
}
#footer
{
height: 115px;

width:100%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
background-color: white;
padding-top: 1em;
padding-bottom: 0.5em;
}
#footbox {
height: 70px;
width: 1100px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#contains {
width: 100%;
margin-top: 50px;


}
#toTop {
    clear:both;
    width: 600px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    font-family: 'Bree Serif', serif;
    color: white;
    border-radius: 5px;
    background: #f44336;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 70px;
}
#logo {
float:left;
margin-top:1em;
}
h1 {
    position: relative;
 vertical-align: text-top;
    margin-top: -12px;
font-family: Jersey;
    font-size: 3.5em;
    text-align: right; 
    color: #f44336;
}
h4 {
margin-top: 0px;
margin-bottom: 0;
font-family: Jersey;
font-size: 2em;
text-align: center; 
color: white;
}
h5 {
position:relative;
float:left;
font-family: 'Open Sans', sans-serif;
color: #f44336;
font-size: 37px;    
padding:5px;
width:250px;
margin-top: -15px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: right;

}
#purple {
    text-align: center;
      vertical-align: middle;
    margin-top: 10px;
position:relative;
    padding-right: 15px;
}
.caltxt {
    padding-top: 0px;
    padding-left: 15px;
    font-size: 1em;
    color: white;
}
#calendar {
        margin-bottom: 5em;
margin-left: 80px;
    float: left;
    width: 600px;
    height: 400px;
}
#sept {
    float: left;
    position: relative;
    width: 25%;
    height: 100%;
    background-color: #4caf50;  
}
#oct {
    float: left;
    position: relative;
    width: 25%;
    height: 75%;
    background-color: #f44336;  
}
#nov {
    float: left;
    position: relative;
    width: 25%;
    height: 75%;
    background-color: #266fea;  
}
#dec {
    float: left;
    position: relative;
    width: 25%;
    height: 75%;
    background-color: #ffc107;  
}
#plus {
    float: left;
    position: relative;
    width: 75%;
    height: 25%;
    background-color: #9c27b0;  
    z-index: 0;
}
.calendar {
     -webkit-transition: all 250ms;
      -moz-transition: all 250ms;
      transition: all 250ms;
}
.calendar:hover {
    z-index: 9998;

        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
         -webkit-transform: translateY(-5px);
         -moz-transform: translateY(-5px);
         transform: translateY(-5px);
}
div#title   {
    margin-top: 50px;
    position: absolute; 
    width: 1100px;
    height: 70px;
      background: url('weblogo.png'); 
      background-repeat: no-repeat;
      background-position: 0px;
      background-size:  auto 70px;

}
#checklist {
    overflow: auto;
    position: relative;
    float: left;
    width: 750px;

    font-family: 'Open Sans', sans-serif;
    padding-bottom: 8vh;
    padding-top: 15px;
 text-align:left;

}
#short {
    width: 750px;
    color: black;
    font-weight: bold;
    font-size: 1.3em;
}
#form {
overflow: auto;
border-radius: 5px;
padding: 15px;
    position: relative;
    width: 260px;
display: inline-block;
-webkit-transition:background 0.3s;
-moz-transition:background 0.3s;
-o-transition:background 0.3s;
transition:background 0.3s;
transition-timing-function: ease-in-out;
}
.text {
width: 90%; 
    text-align: left;
    padding: 5px;
    margin-top: 0px;
    margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
    border: 1px solid grey;
    border-radius: 5px;

}
#fulltext {
    width: 90%;
    padding-right: 30px;

}
#name {
    background: url(profile.png) no-repeat scroll 5px 5px;
    background-color: white;
    background-size: 20px;
    margin-top: auto;
    margin-bottom: auto;
    padding-left:30px;
    margin-bottom: 10px;
}
#email {
    background: url(message.png) no-repeat scroll 5px 8px;
    background-color: white;
    background-size: 20px;
    margin-top: auto;
    margin-bottom: auto;
    padding-left:30px;
    margin-bottom: 10px;

}
#university {
    background: url(university.png) no-repeat scroll 5px 4px;
    background-color: white;
    background-size: 20px;
    margin-top: auto;
    margin-bottom: auto;
    padding-left:30px;
    margin-bottom: 10px;

}
h3 {
    font-family: 'Bree Serif', serif;
    width: 130px;
    color: white;
    border-radius: 5px;
    background: #f44336;
    padding: 5px;

}
#textbox{
width: 90%;
height: 5em;
}

#textbox::-webkit-input-placeholder{
    color:transparent;
}

#textbox::-webkit-input-placeholder::before {
    color:#666;
    content:"program?*";
}


h2 {
font-weight: bold;  
font-size: 1em;
font-family: 'Open Sans', sans-serif;
}

ul.inline {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
    padding: 0px;
    margin: 0px;
}

ul.inline li {
    padding: 5px;
    background-image: url(check.png);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 0px center; 
    padding-left: 25px; 
}
#fun {
    float: left;
padding-bottom: 50px;
}
#creativity {
    padding-bottom: 80px;

}
#community {
    float: left;
    margin-left: 75px;

}
#innovation {
    float: left;
    margin: 30px;

}
#challenge {
    float: left;
    margin-left: 100px;
    margin-top: -25px;
    margin-bottom: 5em;
    height: 220px;
}
#csanad {
    height: 130px;
    float: left;
    margin-left: 5%;
    margin-top: 4%;
padding-bottom: 80px;

}

#adam {
    height: 130px;
    float: left;
    margin-left: 0%;
    margin-top: 70px;

}
#adamtxt {
    font-size: 0.9em;
    width: 61%;
    float:left;
    margin-top: 72px;
    margin-left: 25px;
}
#rapper {
width:400px;
float: left;

}
#csanadtxt {
    font-size: 0.9em;

    width: 32%;
    float:left;
    margin-top: 4%;
    margin-left: 25px;
}
#noura {
    height: 130px;
    float: left;
    margin-left: 15px;
    margin-top: 75px;

}
#nouratxt {
    font-size: 0.9em;

    width: 23%;
    float:left;
    margin-top: 80px;
    margin-left: 25px;
}
#container {

}
div#logo img {
position: absolute;
height: 25px;
}
#menu{
    position: relative;
    padding: 0px;
float: right;
}
ul#menu  li {
  list-style: none;
  display: inline-block;
  font-size: 0.95em;
    height: 1vw;


}
ul#menu li a {
  padding: 5px;
  padding-left: 0.45vw;
  padding-right: 0.45vw;
  color: #ff4412;
  font-family: 'Open Sans', sans-serif;
  outline: none;
  text-transform: uppercase;
  border-radius: 5px;
}
div#container div#header div#header-inner ul#menu li a:focus {
  text-decoration: none;
}
div#container div#header div#header-inner ul#menu li a:hover {
  background: #ff4412;
  color: white;
  text-decoration: none;
}
div#container div#header div#header-inner ul#menu li.highlight a {
  color: white;
  border-radius: 5px;
  background: #ff4412;
}
div#container div#header div#header-inner ul#menu li.highlight:hover {
  opacity: 0.9;
}
Explanation

How the browser see your CSS without !important:

for screen 200px < x < 800px do this {
  bla bla bla
}
but... wait a second.. forget about it, do this for all screens {
  bla bla bla
}

When you add !important the browser will take it like this:

for screen 200px < x < 800px do this {
  bla bla bla
  !do not listen to me if I will ever give you any other instructions
}
but... hey dude, want any instructions? Can you do this for all screens? {
  bla bla bla
}

If you place @media block in the end of your file and remove all the !importants it will look like this:

for all screens do this {
  bla bla bla
}
but for screens 200px < x < 800px do this {
  bla bla bla
}
Demo

Open this snippet in full page mode and try to change browser's window size

@media (max-width: 800px) {
    .bad {
        background-color: green;
    }
}

.bad, .good {
    width: 100px;
    height: 100px;
    background-color: firebrick;
}

@media (max-width: 800px) {
    .good {
        background-color: green;
    }
}
<div class="good"></div>
<div class="bad"></div>

CSS3 Media Queries: Simple Gotchas & Easy Fixes, It could be a CSS3 media query mistake so simple that you've just overlooked it. declared, unless the first one has the !important marker or is more specific. a mobile device, you won't see the media queries applied initially without this tag. It is so simple, but not easy to spot after a long day of working with source code. Media Queries Not Working on Desktop. When your queries don’t work on a desktop computer with a reduced browser window but on mobile devices, you might have set a device-specific media query. Note that max-device-width and max-width are not the same. For the first media query, screen size, not viewport size is the decisive factor.

Flip the order to place the media query later. It doesn't seem to add any selector weight, so the later one takes priority.

So you would have (snipped):

html body {
position: absolute;
height: 100%;
width: 100% !important;
margin: 0 auto;
text-align:center;
}
@media all and (min-width: 200px) and (max-width: 850px) {
    html body {
    position: absolute;
    height: 100%;
    width: 100% !important;
    margin: 0 auto;
    text-align:center;
    }
}

See, for example, CSS specificity on MDN, which does not list @media-queries as increasing weight.

Using !important in your media queries, important might be used: To aid or test accessibility; To temporarily fix an urgent problem; To override styles within Firebug or another developer  Media Queries not working: What am I doing wrong? My media queries do not work in Firefox (latest version). I have referenced my responsive.css files properly (I believe) and am certain I'm missing something in the CSS portion.

You must check <head> tag. First, include the main style css file and then include the responsive css file.

something like this :

<link rel="stylesheet" type="text/css" href="mainstyle.css">
<link rel="stylesheet" type="text/css" href="reponsive.css">

CSS media queries not overriding, Not really….but without knowing how it breaks and what in your code causes the problem it's hard to comment. Again, a brief demo of the issue  Always mention max-width and min-width in some unit like px or rem. This figured it out for me. If I write it without the unit and only the number value, browser can't read the media queries. example: this is wrong @media only screen and (max-width:950) and this is right @media only screen and (max-width:950px)

css style priority sequence

  1. "!important"
  2. Priority goes to most explicitly define rule. ex: 1) .class1 { .class2 { .class3 { color: green } } }

    2) .class1 { .class3 { color: red } }

  3. Priority goes by order (bottom are prior to top)

@media query not working correctly, @media query not working correctly. Hi! I'm trying to make this site responsive without using a framework. For the most part, @media (min-width: 720px) { footer{ padding-bottom:25px!important; }. } (I know !important isn't the  Also, the Design view can set up media queries for you. Insert and position wrap points for the different positions you want to discriminate upon, and then make a new style and then click the (+) tab where it lists the queries to make a new media query.

Put your responsive css after style css if there is matched issue. Problem will solved.

Media Queries Not Working on Mobile > Litmus, The media queries aren't working at all when I send a test in Litmus builder: table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt  There are many more screen sizes available and you can use the media queries for these sizes but it’s not necessary. The above queries are sufficient to make a site fully responsive. Any size bigger than 1824 Px will still look the same as the 1824px size screen.

Avoiding CSS overrides in responsive components · GitHub, In this pattern, all styles outside of media queries are either mobile or common styles. We override some Scoped styles (not just wider breakpoints). h2 { color: Less noise from overrides when working with CSS in dev tools. Media queries are not modular, so this can make them difficult to work with, as discussed by Ian Storm Taylor. However, others are pushing for the use of elemental queries, as pointed out by Richa Jain in her excellent article “Beyond Media Queries — It’s Time to Get Elemental.”

Media Queries and How They Work in Email Design, Media Queries Demystified: CSS Min-Width and Max-Width on an iPhone 5S with a screen width of 320px, the media query will not trigger and the styles contained in { … } Now we add !important (an email developer's magic bullet). clear, concise and without all the usual overly-technical fluff – perfect! @media not all and (max-width: 600px) { html { background: red; } } Just doing not (max-width: 600px) doesn’t seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within.

Media Query with Bootstrap in Header - HTML-CSS, doesn't work with the bootstrap in the header and still does work without the boostrap in the header. Any ideas why this media query doesn't work with bootstrap in the header? I've run into similar issues with Bootstrap's CSS taking precedent over my CSS, and the !important rule typically will override it. Media queries can also be used to target certain resolutions or specific email clients. You can also use media queries instead of, or in addition to, fluid hybrid design. How Min-Width and Max-Width Media Queries Work. How media queries function can be a bit confusing. Let’s look at the queries that are commonly used in email. Max-Width

Comments
  • Please do not post your entire CSS here but create a case which indicates the problem.
  • I had the same problem, I moved @media blocks to the bottom of the css file and it worked without !important. thank you.
  • I've changed it to html body { position: absolute; height: 100%; width: 100%; margin: 0 auto; text-align:center; } @media all and (min-width: 200px) and (max-width: 850px) { #header { background-color: white; position: absolute !important; top: 0px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); width: 95%; height: 38vw !important; z-index:9999; } (snipped) Still the same. @Scimonster