i'm trying to make menu to be position: fixed; when the browser width and height minimum or bigger than 1024/960 but for some reason when i'm resizing the screen height to more than 960 it doesn't work
here is the code i'm using:
#media (min-width: 1024px) and (min-height: 960px) {
...
}
i'm new to the #media any help would be appreciated!
have you looked at this answer?
with media queries you should use some kind of meta tag.
also, try these meta tags:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
<meta name="viewport" content="width=device-width"/>
and try using
#media screen and (min-width: 1024px) and (min-height: 960px) {
***content***
}
for some reason it worked for me after replacing the AND with comma separate
before:
#media only screen and (min-width : 1024px) and (min-height : 960px)
after:
#media only screen and (min-width : 1024px), (min-height : 960px)
any idea why?
Related
I have been struggling with the iPad portrait view of a post grid on my site. The grid looks fine in all other view except for this one, where the grid appears on the far right-hand side of the container.
The theme's (Alexandra) CSS is as follows:
#media only screen and (max-width: 941px) and (min-width: 768px).container {width: 726px;}
I've tried to modify this by using:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) .container {width:510px;}
And:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {width:510px !important;}}
Also:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {margin-right: 200px;}
As well as several other configurarions and nothing happens. Any ideas on what I'm missing or why this isn't working or changing anything? Thank you so much for reading! Any insight is greatly appreciated!
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
So you should add to index.html this meta:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I have written this media query for Macbook Pro. It is not accepting the media query. My Macbook's resolution is 1280x800 13 inches
#media only screen
and (min-device-width : 1280px)
and (max-device-width : 800px)
{
.col-md-12.webtestingsocial
{
margin-left: 29px !important;
}
}
It should work this way:
#media screen and (min-width: 800px) and (max-width: 1200px) {
/* Your Styles */
}
Also make sure you have this tag inside the HEAD
<meta name="viewport" content="width=device-width, initial-scale=1">
I think it's because making your min-device-width value higher than your max-device-width makes it invalid.
Have you tried making the min-device-width 800px and max-device-width 1200px?
Media Query for macbook 13 inches(1280*800)
#media screen and (min-width: 800px) and (max-width: 1281px)
{
//write your styles here
}
This is my media query for resolution with width of 1280 pixels:
#media (min-width: 1270px) and (max-width: 1280px)
When I want to use seperate query for height like this:
#media (min-width: 1270px) and (max-height: 960px)
It doesn't work. It's not showing even in the developer tools in chrome. Can I get some suggestions?
you need to add a comma between different conditions (width/height)
#media screen and (min-width: 1270px), screen and (max-height: 960px )
https://jsfiddle.net/ahmadabdul3/fxaknLn7/
You must add this code at first
<meta name="viewport" content="width=device-width" />
and use this link
https://css-tricks.com/logic-in-media-queries/
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
I am developing a responsive website and I'm applying the below media CSS queries:
Query1:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /*My Styling*/}
Query2:
#Media screen and (max-width:768px) { /*My Styling*/ }
Query3:
#Media screen and (max-width:1024px) { /*My Styling*/ }
I am also doing this meta statement in the head:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />
For some reason the second and the third query are being applied fine but when I test the first query (Practically targeting iPhone landscape) none of the defined styles get applied.
As you haven't specified a min-width for other queries you should organize your css like this:
query3
query2
query1
That way your last level of css will be applied correctly without getting overwritten by your other queries.
Emulation of a iphone device in landscape orentation in chrome works as intended:
http://www.bootply.com/tumubw4Ztq
#Media screen and (max-width:1024px) { body{background-color:red;}}
#Media screen and (max-width:768px) { body{background-color:yellow;}}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { body{
background-color:blue;}}
I have developed an app with iPhone as design target (i.e. 640x960 => 2:3) and I have done so using percentages for each division in layout so the ui streches itself with respect to device size. Now this works fine with iPad but I am having problems with 9:16 aspect ration devices. I have used Media Queries for the purpose but that isn't working.
The default code for division is:
.top_bar {
height: 9%;
}
Now using Media Queries aspect ratio:
#media screen and (min-device-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}
But this is not working, not on browser and not on device.
I have added viewport metatag content value as
content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi"
Later I tried multiple resolutions to detect aspect ratio as:
#media
only screen and (min-device-width: 320px) and (min-device-height: 560px),
only screen and (min-device-width: 480px) and (min-device-height: 850px),
only screen and (min-device-width: 640px) and (min-device-height: 1130px),
only screen and (min-device-width: 720px) and (min-device-height: 1270px),
only screen and (min-device-width: 768px) and (min-device-height: 1360px),
only screen and (min-device-width: 800px) and (min-device-height: 1422px),
only screen and (min-device-width: 960px) and (min-device-height: 1700px),
only screen and (min-device-width: 1080px) and (min-device-height: 1910px)
{
.top_bar {
height: 7.5%;
}
}
But this isn't working either.
UPDATE - FIXED
Experiment a little and just changed min-device-aspect-ratio: 9/16 to max-aspect-ratio: 9/16
and its working fine now.
#media screen and (max-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}
put Your meta tag like this
<meta name="viewport" content="width=device-width, initial-scale=1">
And write Your Media queries
#media only screen and (min-width: 768px) and (max-width: 956px){
.top_bar { height: 7.5%;}
}