I ried to put comma to combine media query but didnt work
#media all and (min-width: 600px) and (orientation: portrait),
#media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {}
any ideas how to do that in scss?
get rid of #media on the second line:
#media all and (min-width: 600px) and (orientation: portrait),
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {}
That has nothing to do with SCSS by the way. It is how you declare media queries in plain css too. Here is some documentation, refer to comma-separated lists - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Related
I'm trying to create some common breakpoints for mediaqueries in my angular app. I'm using scss. I repeat this 3 lines everywhere and I want to improve it:
#media screen and (orientation: landscape) and (max-width: 959px),
screen and (orientation: portrait) and (max-width: 599px) {
#media screen and (orientation: landscape) and (max-width: 959px) {
#media screen and (orientation: portrait) and (max-width: 599px) {
I want to create some variables for including this, but I'm not getting it, it should be something like:
$mobile = "screen and (orientation: landscape) and (max-width: 959px),
screen and (orientation: portrait) and (max-width: 599px)"
$landscape_mobile = "screen and (orientation: landscape) and (max-width: 959px)"
$portrait_mobile = "screen and (orientation: portrait) and (max-width: 599px)"
is it possible to be done?
You can create a mixin and use it whenever you want
#mixin breakpoint($point) {
#if $point == desktop {
#media (min-width: 1400px) { #content; }
}
}
// Use like this
div {
#include breakpoint(desktop) {
display: none;
}
}
Variables are defined using a :, not =.
You can use them this way:
$mobile: "screen and (orientation: landscape) and (max-width: 959px),
screen and (orientation: portrait) and (max-width: 599px)";
$landscape_mobile: "screen and (orientation: landscape) and (max-width: 959px)";
$portrait_mobile: "screen and (orientation: portrait) and (max-width: 599px)";
#media #{$mobile} { ... }
#media #{$landscape_mobile} { ... }
#media #{$portrait_mobile} { ... }
Note the interpolation syntax #{}.
More about Sass interpolation
I have like 16 media queries or something and i noticed that if i put every media query portrait 1 different color some are falling under another media query. For instance i have:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
and i have for instance:
#media only screen and (min-device-width: 320px) and
(max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {}
Then both backgrounds are red but i put the second background on purple. I am referring to my own website www.gester.nl. Can someone help me and see into the website with media query code why some media queries are not working like they are supposed to work. Is it that i use a wrong order or something? I just use google f12 to see how it looks on other devices.
Your media queries are overlapping. You will want to use something like the below to target specific screen sizes:
#media only screen and (min-width: 320px) and (max-width: 480px) {
// do stuff between 320px and 480px
}
#media only screen and (min-width: 481px) and (max-width: 568px) {
// do stuff between 481px and 568px
}
I have two media query combined like below in my scss file:
#media all and (min-width: 600px) and (orientation: portrait),
// add css rule to the above media query
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
border: 1px solid #red
// add specific css rule to current media query only
}
How would I add a specific rule for each query in that case?
I am afraid you can't do that. This is one query, with two sets of rules, there is no "current" query. You can repeat the rules in new queries like this:
#media all and (min-width: 600px) and (orientation: portrait) {
// styles
}
#media all and (min-width: 600px) and (orientation: portrait),
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
// shared styles
}
ps: you are missing the class declaration on your example
You can use variables to save queries. Also nest #media to keep them organized because all #media rules won't be nested in CSS. It would be nice to interpolate in #media rules but it is not working yet.
$media: 'all and (min-width: 600px) and (orientation: portrait)';
$media2: 'all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait)';
#media #{$media} {
color:red;
#media #{$media}, #{$media2} {
color:blue;
}
}
Media query for Motorola e(2nd generation). Kindly post the media query. #media only screen
and (min-width: 480px)
and (max-width: 960px) and (orientation:portrait) is not working
your syntax may be wrong as posible so try this
#media screen and (min-width: 480px) and (max-width: 960px) {
//Your Code
}
I just want to target with media query a galaxy tab 3.
According to its resolution (1280 x 800) it should be:
#media (max-device-width: 800px) and (orientation: portrait) {
}
#media (max-device-width: 1280px) and (orientation: landscape) {
}
The problem is that some iMacs has this same resolution, and my fix to Galaxy Tab 3 affects this device. Any way to not affect imac?
Thanks in advance
There's no way to do device-specific media queries, unfortunately, but there is a solution. From a practical design perspective, what makes the iMac and the Galaxy Tab different if they're the same resolution? Their DPI. That's something you can query for! Accroding to http://tablets.findthebest.com/l/232/Samsung-Galaxy-Tab-3-7-0 it's 169 ppi.
#media (max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi) { }
#media (max-device-width: 1280px) and (orientation: landscape) and (min-resolution: 169dpi) { }
You might need to do -webkit-min-device-pixel-ratio as well, but I can't tell you what the Tab's default ratio is (probably 1.5, but you can check here: http://bjango.com/articles/min-device-pixel-ratio/ )
#media
(max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi),
(max-device-width: 800px) and (orientation: portrait) and { }
#media
(max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) (min-resolution: 169dpi),
(max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) { }