Suppose I have some less code like this:
#desktop-min-width: 1024px;
#phone-max-width: 768px;
#desktop: ~"only screen and (min-width: #{desktop-min-width})";
#tablet: ~"only screen and (min-width: #{phone-max-width}) and (max-width: #{desktop-min-width})";
#phone: ~"only screen and (max-width: #{phone-max-width})";
.hola {
#phone {
height: 100vh;
top: 10px;
}
#tablet {
height: 30vh;
top: 30%;
}
#desktop {
height: 30vh;
top: 30%;
}
}
// ...more styles...
I there a way for me to combine the #tablet and #desktop and reduce the duplication? Something like this is what I'm imagining:
#tablet or #desktop {
height: 30vh;
top: 30%;
}
Just using a comma should do what you want:
#tablet, #desktop {
...
}
Related
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 .
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%;
}
}
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
I have several mediaqueries. It's works perfectly with the width and it's awfull with height... !!?
I put the same code but.. All the width are ok.
#media all and (max-width: 800px)
{
.customTips
{
float: left;
position: absolute;
top: 950px;
width: auto;
}
}
#media all and (min-width: 801px) and (max-width: 920px)
{
.customTips
{
float: left;
position: absolute;
top: 950px;
width: auto;
}
}
#media all and (min-width: 921px) and (max-width: 1320px)
{
.customTips
{
width: 15%;
}
}
The code with height doesnt' works correctly.
#media all and (min-height: 720px) and (max-height: 767px)
{
.customCadreFormulaire
{
height: 405px !important;
}
}
#media all and (min-height: 768px) and (max-height: 899px)
{
.customCadreFormulaire
{
height: 420px !important;
}
}
When I try this code, with a screen 1440/900, the code for media all and (min-height: 720px) and (max-height: 767px) works at place ??
I don't understand why, an idea ? Thanks..