Menu
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;
}
220
Media queries and @media rules do not affect the behavior of ! important in any way, because they do not have any effect on any part of the cascade.
Media Query Not Working on Mobile Devices If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.
To override a specific media query rule, append a new css rule after the one you want to override. For example, if the last css rule does not have a media query attached, it will override all previously declared media queries (presuming the same selectors).
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps unintuitively.
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
}
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>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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
