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
Related
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;
}
}
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
i want the green and red box to be smallere at mobile (iPhone): http://shop.cykel-expressen.dk/booking/
I thought this was the code, but it is not working, but isn't working)):
#media all and (min-width:321px) and (max-width: 480px) .dopsp-body { .dopsp-body height: 50xp }
You are missing { after the (max-width: 480px)
#media all and (min-width:321px) and (max-width: 480px) {
.dopsp-body { height: 50px }
}
You can use media query for this.
#media screen and (max-width: 480px){
//Reduce the size of green and red box here
}
You are using wrong method, try to this.
#media only screen and (max-width: 479px) {.dopsp-body {height: 50px }}
try first is for portrait second for landscape code is on http://stephen.io/mediaqueries/ has plenty of good snippets
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
I am working on the this website. I have added the following code to make it hide the bottom menu when someone opens it on a mobile device,
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
.footer-p-1{
display:none;
}
}
/* Portrait */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
.footer-p-1{
display:none;
}
}
/* Landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
.footer-p-1{
display:none;
}
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
.footer-p-1{
display:none;
}
}
For some reason, the css does not work. Please guide me where am I wrong?
Thank you
Problem:
The browser currently outputs your CSS as:
-webkit-min-device-pixel-ratio is not valid any more as the w3.org CSS validator outputs:
Solution:
-webkit-min-device-pixel-ratio is deprecated and needs to be converted to min-resolution
You will need to unprefix the media query condition:
Unprefix Webkit device pixel ratio
I think you must not define Min-max but if you want to hide it for mobile device like with widt < 800px try this:
#media (max-width: 800px) {
.footer-p-1{
display:none;
}
}
comment the other and try only with this
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: #) { }