I have the following media queries:
#media all and (max-height: 720px) and (min-width:1px) {
.tabeditor {
height: 60%;
}
}
#media all and (max-height: 768px) and (min-width:1px) {
.tabeditor {
height: 63%;
}
}
When I run it on 1280X720 I see that the height from query with 768px takes over. Is that correct? I am running it in Chrome.
Thanks for help.
#media all and (max-height: 720px) and (min-width:1px)
{
.tabeditor {
height: 60%;
}
}
#media all and (max-height: 768px) and (min-height : 721px) and (min-width:1px)
{
.tabeditor {
height: 63%;
}
}
You might also need a #media all and (min-height: 769px) and (min-width:1px)
Yes, that's what the specification says.
CSS rules always override previous rules and max-height: 768px will always match for heights lower than 720.
Try reversing the order of the selectors.
You have to use
#media all and (min-height: 720px) and (min-width:1px)
{
.tabeditor {
height: 60%;
}
}
#media all and (min-height: 768px) and (min-width:1px)
{
.tabeditor {
height: 63%;
}
}
and so when you are on 720px height the 768px media query will not take effect
Related
I am trying media queries, but they won't work on 768px and 576px. I tried the minimum width but it also does not work.
.changing-color {
background-color: powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px) {
.changing-color {
background-color: chartreuse;
}
}
#media screen and (max-width: 1200px) {
.changing-color {
background-color: blueviolet;
}
}
#media screen and (max-width: 992px) {
.changing-color {
background-color: brown;
}
}
#media screen and (max-width: 768px) {
.changing-color {
background-color: darkorange;
}
}
#media screen and (max-width: 576px) {
.changing-color {
background-color: darkkhaki;
}
}
<div class="changing-color"></div>
Your CSS is correct, it works in this pen. Maybe you are not resizing your screen? Because that is exactly what these media-queries are for.
This snippet below is limited in width, so it will show probably darkorange depending on how you are viewing this page. On mobile it might even show darkkhaki.
.changing-color {
background-color:powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px){
.changing-color {
background-color:chartreuse;
}
}
#media screen and (max-width: 1200px){
.changing-color {
background-color:blueviolet;
}
}
#media screen and (max-width: 992px){
.changing-color {
background-color:brown;
}
}
#media screen and (max-width: 768px){
.changing-color {
background-color:darkorange;
}
}
#media screen and (max-width: 576px){
.changing-color {
background-color:darkkhaki;
}
}
<div class="thing changing-color"></div>
Have you added a viewport meta tag like this ?
<meta name="viewport" content="width=device-width,initial-scale=1">
This is needed because by default, most mobile browsers lie about their viewport width.
Reference Beginner's Guide to Media Queries
I am applying this`
#media screen and (max-width: 800px OR max-height: 600px) {
...
}
It's comma separated
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
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;
}
}
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..
I need to resize and hide an element based on certain conditions, but I can't get it right.
Pseduo code:
If height is less than or equal to 400px : hide
If height is between 401-600 : do x
If height is greater than or equal to 601px : do y
I'm doing this:
#media only screen and (max-height: 400px) {
/* hide */
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
/* do X */
}
#media only screen and (max-height: 601px) {
/* do Y */
}
...but it always defaults to the last condition: do Y
Your last condition should be min-height and not max-height. also does not need to set and (max-height: 600px) because the following MQ will match anyway
http://jsfiddle.net/rnrlabs/3r382qts/
#media only screen and (max-height: 100px) {
.condition {
display: none;
visibility: hidden;
}
}
#media only screen and (min-height: 101px) {
.condition {
color: red;
}
}
#media only screen and (min-height: 301px) {
.condition {
color: blue;
}
}
#media only screen and (max-height: 601px) {
should be
#media only screen and (min-height: 601px) {
Because you want "If height is greater than or equal to 601px : do y" but max-height would set the maximum height.
Your last condition should be min-height and not max-height:
#media only screen and (max-height: 400px) {
/* hide */
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
/* do X */
}
#media only screen and (min-height: 601px) {
/* do Y */
}
#media only screen and (max-height: 400px) {
.Submenu {display:none !important;}
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
.Submenu {display:block;}
}
#media only screen and (min-height: 601px) {
.Submenu {display:inline-block !important;}
}