I want to target specific resolution 1600x900 and apply css only to it. I have tried this
#media only screen and (min-width:1899px) {
.up { margin-top: -5%;}
}
And this
#media screen and (max-width: 1900px) and (min-width: 1900px) {
.up { margin-top: -5%;}
}
Both doesn't work and I don't see them in console. Is there any other way to do this?
You can use width to target a specific viewport width.
#media (width: 1600px) {
.up { margin-top: -5%;}
}
You are making an error, change the resolution value.
#media screen and (min-width: 1600px) {
.up {
background-color: lightgreen;
}
}
If you don't want to apply styling to the resolution above 1600px use:
#media screen and (width: 1600px) {
.up {
background-color: lightgreen;
}
}
Related
This is with #media screen and (max-width:700px) {
https://i.gyazo.com/eab7c69146b5d47f3ce9adefae6e712d.png
When I do #media screen and (min-width:700px) { It gets screwed up. How do I change it to min-width without it messing up?
https://gyazo.com/3c27f20efe29a4cf001bf531dac59405.png
Use this code
#media only screen and (min-width: 700px) {
}
this will surly help you
You can use both min-widht and max-width and also combine them if you want.
min-width example:
#media screen and (min-width: 576px) {
body {
background-color: lightgreen;
}
}
max-width example:
#media screen and (max-width: 767.98px) {
body {
background-color: lightgreen;
}
}
min-width and max-width combination example:
#media (min-width: 576px) and (max-width: 767.98px) {
body {
background-color: lightgreen;
}
}
Note that I used 767.98px for the max-width because the next media rule would be for example #media (min-width: 768px) and (max-width: 991.98px) {}.
Read more about media rules here. You can also view how media rules are used in bootstrap here.
I want to achieve if the screen is pc user width:880px; if it is mobile use width: inherit;, how do i get this using the #media query.
#media all and (width: 880px) {
.colm_6_container {
width: inherit;
}
}
My div class is 'colm_6_container'.
//ipad and desktop
#media screen and (min-width: 768px) {
.colm_6_container{
width: 880px;
}
}
This is the first time I'm using LESS, and I am trying to get some elements to scale based on a media query.
So I figured I'd make a .scale mixin to do this for me.
.scale(#rules) {
#scale-ratio: 1;
#media screen and (min-width: (#page-width)) { #rules(); }
#scale-ratio: 0.8;
#media screen and (min-width: (#page-width * 0.6), max-width(#page-width - 1)) { #rules(); }
#scale-ratio: 0.6;
#media screen and (max-width: (#page-width * 0.6 - 1)) { #rules(); }
}
// Using like
header {
.scale({
width: #page-width * #scale-ratio;
});
}
Is there any way to make it work? Or through another method? I just don't want to fall back to having to write the properties for each media query.
On request the expected output:
#media screen and (min-width: 1280px) {
header {
width: 1280px;
}
}
#media screen and (min-width: 768px, max-width: 1279px) {
header {
width: 1024px;
}
}
#media screen and (max-width: 767px) {
header {
width: 768px;
}
}
With this input that's the expected output, but it's just a stripped example.
The variable's scope is limited to the blocks (they behave like constants and the order doesn't affect them). One way to restrict the scope so you can redefine variables is to declare them in &{} blocks.
The mixin below generates the CSS you expect:
.scale(#rules) {
&{
#scale-ratio: 1;
#media screen and (min-width: (#page-width)) { #rules(); }
}
&{
#scale-ratio: 0.8;
#min-width: (#page-width * 0.6);
#max-width: (#page-width - 1);
#media screen and (min-width: (#min-width), ~'max-width: #{max-width}') { #rules(); }
}
&{
#scale-ratio: 0.6;
#media screen and (max-width: (#page-width * 0.6 - 1)) { #rules(); }
}
}
I had to place the max-width part within apostrophes since it was causing an error (I don't really know why).
Using:
#page-width: 1280px;
the result is:
#media screen and (min-width: 1280px) {
header {
width: 1280px;
}
}
#media screen and (min-width: 768px, max-width: 1279px) {
header {
width: 1024px;
}
}
#media screen and (max-width: 767px) {
header {
width: 768px;
}
}
#media only screen and (min-width: 767px) and (max-width: 2000px) {
html { background-color: green; }
}
#media only screen and (min-width: 481px) and (max-width: 766px) {
html { background-color: green; }
}
#media only screen and (min-width: 321px) and (max-width: 480px) {
html { background-color: green; }
}
#media only screen and (max-width: 320px) {
html { background-color: green; }
}
html {
background-color: blue;
}
I'm using opera, 1920x1080 screen. The first #media tag works, the background changes to green when opera is at 100% zoom.
Changing zoom to 90% makes the background blue already...and it stays blue the whole time even at 10% zoom. Why is that so?
The first #media tag seems to be working, the others don't. And even so the first tag doesn't work properly (90% * 1080px > 767px; so the color should be green while at 90% zoom but it's not).
Move your single html definition to the top, you can also reduce the media queries to just use max
html {
background-color: blue;
}
#media only screen and (max-width: 2000px) {
html { background-color: green; }
}
#media only screen and (max-width: 766px) {
html { background-color: red; }
}
#media only screen and (max-width: 480px) {
html { background-color: black; }
}
#media only screen and (max-width: 320px) {
html { background-color: white; }
}
http://jsfiddle.net/Y5tLf/
Of late, I've been designing sites that are more responsive and I've been using CSS media queries frequently. One pattern I noticed is that the order in which the media queries are defined actually matters. I didn't test it in every single browser, but just on Chrome. Is there an explanation for this behaviour? Sometimes it gets frustrating when your site doesn't work as it should and you are unsure if it's the query or the order in which the query is written.
Here's an example:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two">Contact us</div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
However, If I wrote the query for 1024x600 in the last, the browser would ignore it and apply the margin value specified in the starting of the CSS (margin-top:2em).
/* Media Queries - Re-arranged version */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
If my understanding of media queries are correct, the order shouldn't matter, but it seems it does. What could be the reason?
That's by design of CSS — Cascading Style Sheet.
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
So, given this CSS
#media (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
if the browser window is 350 pixels wide, the background will be blue, while with this CSS
#media (max-width: 400px) {
body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.
Finally, with
#media (max-width: 400px) {
body {
background: blue !important;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
or
#media (max-width: 400px) {
html > body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
the background will be blue (with a 350 pixels wide window).
Or you could just add min-width to the bigger media query/ies and not have any issues, regardless of the order.
#media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
Using this code, in any order, the background-color will always be red for resolutions with a width of 400.1px-600px, and will always be blue for resolutions with a width of 400px or less.