I am trying to move a shortcode which I put in Wordpress header. The problem is that from the 2 css rules below only the first works. If I change the order then again only the first works.
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
.navigation-wrap{
padding-top: 60px;
} #media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
if you want the "Navigation-wrap" class to be part of the first media query:
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
.navigation-wrap{
padding-top: 60px;
}
} <-- this was missing!
#media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
}
if "navigation-wrap" should be independent from your media querys:
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
} <-- this was missing!
.navigation-wrap{
padding-top: 60px;
}
#media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
}
reason: You forgot the bracket, which basically meant that the second media query was aprt of your first, so it could never occur! When your screen size reached 1025px the first media query is not active anymore and the second one was inside of the first one, so it also couldnt happen anymore. That should fix it
Yes , Only the first CSS code works, you should use javascript, to change the styles based on the Conditions you specify .
Related
This question already has answers here:
Why media queries has less priority than no media queries css
(2 answers)
Closed last year.
In the media query I aske to position nav bar at the bottom and remove the margin-lef of the main section.
The media query make the job for the nav bar but not for the margin-left.
https://codepen.io/ALL9000/pen/yLzQKmv?editors=1000
What’s wrong. ?
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
You simply have to put the media-query at the end of the CSS.
You default styling for #main-doc comes after the media-query, so overrides it.
It should look like this:
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
position: static;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
As you define the #main-doc {margin-left: 290px;} after the #media query it overwrites the media. if you open your browser developer console you can see the #media appears in smaller sizes but does not take effects. so you can just move the #main-doc {margin-left: 290px;} before #media or use the !important keyword to tell the browse 'whenever this media appears its more important. It's a best practice not to use !important too much cuz it can overwrite and cuz damage somewhere else.
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
OR
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px !important;
}
}
#main-doc {
margin-left: 290px;
}
I have problems with the media-query, it detects me well the first but when they are less than 768px it no longer detects the average
this are my media-querys.
#media screen and (max-width:1920px){
#log {
bottom: 36%;
left: 35%;
}
}
#media screen and (max-width:1440px){
#log {
left: 41%;
width: 57%;
bottom: 30%;
}
#img2 {
width: 100%;
}
}
#media screen and (max-width:1024px){
#log {
left: 61%;
width: 72%;
bottom: 30%;
}
#img2 {
width: 100%;
}
}
#media screen and (max-width:765px){ /***** this is the one that does not work
#Table_01 {
margin-top: -12%;
}
}
You can try this: jsfiddle Demo
#Table_01 {
display: block;
width: 100%;
height: 500px;
border: 1px solid black;
margin-top: 20px;
}
#media screen and (max-width: 768px) {
#Table_01 {
margin-top: -12%;
}
}
<table id="Table_01"></table>
Note: in some #media questions you have 2 spaces, try to use one only to avoid any possible issue.
The last media query just works when the width of the screen is equal or lower than 765px not 768px. Also need to close the comment with */
#media screen and (max-width:768px) { /* this is the one that does not work */
#Table_01 {
margin-top: -12%;
}
}
This code seems to be correct but when i add it to my CSS it crashes the site. What did i do wrong?
CODE USED:
#media only screen and (max-width: 767px) {
.sesusercoverphoto_cover_change_cover {
position: absolute;
left: 20px;
top: 20px !Important;
z-index: 2;
}
You're missing a second closing bracket.
#media only screen and (max-width: 767px) {
.sesusercoverphoto_cover_change_cover {
position: absolute;
left: 20px;
top: 20px !Important;
z-index: 2;
}
}
When I am using
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 80%;
Height: 80%;
}
}
The code does not work and defaults to original styling however the code works for
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%;
Height: 50%;
}
}
all the way up to 1024px and then breaks
anyone have any idea why this is happening?
Your max-width: 1024px query must be placed before the max-width: 425px query in the code, otherwise, as an expected result of CSS specificity, overriding will occur.
Demo of wrong order:
#imgWrapper {
border: 1px dashed red;
padding: 10px;
position: relative; }
#imgWrapper::after { content:"Default - Desktop/Large Screen"; }
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%; }
#imgWrapper::after { content:"Max-425"; }
}
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 75%; }
#imgWrapper::after { content:"Max-1024"; }
}
<div id="imgWrapper">Media Query: </div>
Proper order:
#imgWrapper {
border: 1px dashed red;
padding: 10px;
position: relative; }
#imgWrapper::after { content:"Default - Desktop/Large Screen"; }
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 75%; }
#imgWrapper::after { content:"Max-1024"; }
}
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%; }
#imgWrapper::after { content:"Max-425"; }
}
<div id="imgWrapper">Media Query: </div>
jsFiddle: https://jsfiddle.net/azizn/d5bto8vL/
To conclude, media queries that are based on desktop-first model (max-width queries) should start with default styling for large screens then adding queries for lesser sizes, like so:
large/default > 1024 > 768 > 425 etc
Whereas in a mobile-first model, you use min-width queries and the default styling is smallest then add bigger screens:
small > 425 > 768 > 1024 etc
My nested media query in SASS compiles in unexpected way and I have no idea why.
I have following code:
.report__chart-wrap
position: absolute
width: 100%
#media(max-width: 991px)
// position: static
#media(min-width: 992px)
top: 200px
left: 90px
#media(min-width: 1200px)
top: 155px
left: 0
Which should compile to something like:
.report__chart-wrap {
position: absolute;
width: 100%;
}
#media(max-width: 991px) {}
#media(min-width: 992px) {
.report__chart-wrap {
top: 200px;
left: 90px;
}
}
#media(min-width: 1200px) {
.report__chart-wrap {
top: 155px;
left: 0;
}
}
But actually compiles to something very weird:
.report__chart-wrap {
position: absolute;
width: 100%;
#media(max-width: 991px) {}
#media(min-width: 992px) {
top: 200px;
left: 90px;
}
#media(min-width: 1200px) {
top: 155px;
left: 0;
}
}
which obviously doesn't work.
In the same SASS file I use media queries nested in similar way which compile correctly. I use 3.2.19 sass gem and 4.0.5 sass-rails gem.
Of course I can rewrite this code and make it work, but I wanted to ask if any of you has any idea what could possibly cause this strange bug?
EDIT: I tested some other things since the bug reappeared in a completely different, "fresh" file.
I had something like this:
.class
#media(max-width: $screen-sm-max) //variable from bootstrap gem
width: $screen-sm-max
which compiled to - wait for it -
.class {
#media(max-width: $screen-sm-max) { //not dereferenced variable!
width: 991px;
}
}
this.
When I interpolated the variable in nested media query:
.class
#media(max-width: #{$screen-sm-max})
width: $screen-sm-max
the code compiled correctly:
#media(max-width: 991px) {
.class {
width: 991px;
}
}
It's weird, because it actually doesn't seem like the interpolation should be necessary in this case.
Try write space between #media and bracket:
.report__chart-wrap
position: absolute
width: 100%
#media (max-width: 991px)
// position: static
#media (min-width: 992px)
top: 200px
left: 90px
#media (min-width: 1200px)
top: 155px
left: 0
It should help
You try something like this?
.report__chart-wrap
position: absolute
width: 100%
#media(max-width: 991px)
.report__chart-wrap
// position: static
#media(min-width: 992px)
.report__chart-wrap
top: 200px
left: 90px
#media(min-width: 1200px)
.report__chart-wrap
top: 155px
left: 0