#media only screen and (min-width:300px) and (max-width:667px) and (orientation: portrait) {Class goes here}
#media only screen and (min-width:667px) and (max-width:768px) and (orientation: landscape) {class goes here}
portrait view working good but landscape not showing any change even media query can't see in inspect code also.
I actually tested the ranges:
#media only screen and (min-width:300px) and (max-width:667px) {
div {
background-color: red;
}
}
#media only screen and (min-width:667px) and (max-width:768px) {
div {
background-color: green;
}
}
They do work. But when I add the orientation, it fails to work on the portrait.
#media only screen and (min-width:300px) and (max-width:667px) and (orientation: portrait) {
div {
background-color: red;
}
}
#media only screen and (min-width:667px) and (max-width:768px) and (orientation: landscape) {
div {
background-color: green;
}
}
Try to remove one of the orientation on the media queries. It could solve the problem. If you still want to leave the orientation condition, test it on a real device instead of a simulating tool.
Related
How do i apply styles for differnt screen resolutions
For example: I have a computer with max screen resolution of 1366 X 768
and want to specify css styles only for this resolution .
Css #media rules only take into consideration min-width and max-width of the browser how do i target for specific resolution.
Use the resolution tag i.e. :
#media (resolution: 150dpi) {
p {
color: red;
}
}
More explantations and syntax here: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/resolution
Try this:
#media screen and (min-width: 1366px) and (max-width: 1366px)
and (min-height: 768px) and (max-height: 768px) {
/* style */
}
Use width and height mediaqueries
#media (width: 1366px) and (height: 768px) {
:root { background: yellowgreen; }
}
to match a viewport of 1366x768 px
Codepen example
Anyway it's worth noting that, unless you are in fullscreen mode, that rule won't be applied because the UI of your browser takes some room, so the actual viewport can't be exactly the same of the chosen resolution.
You can try this
#media screen and (min-width: 1500px) and (max-width: 1600px){
/*Your style */
}
I'm a little bit confused because I'm used to do some CSS using media queries... I never had this problem before. Only the first media query is working well... I have few media queries working on specifics sizes like this :
/* - IPAD LANDSCAPE - */
#media screen and (max-width: 1024px) and (orientation: landscape){
header{
background-size: 28vw 30vh, 34vw 38vh;
background-position: right 24vw top 3.5vh, right 21vw top 1vh;
}
header object{
left:16vw;
width:18vw !important;
}
header p{
font-size:14px;
top:16vh;
left:-2vw;
}
}
/* - IPAD PORTRAIT - */
#media screen and (max-width: 768px) and (orientation: portrait){
header{
background-size: 28vw 30vh, 34vw 38vh;
background-position: right 28vw top 3.5vh, right 17vw top 1vh;
}
header object{
left:10vw;
width:24vw !important;
}
header p{
font-size:20px;
top:10vh;
left:-2vw;
}
}
/* - PHONE LANDSCAPE - */
#media screen and (max-width: 750px) and (orientation: landscape){
/*...*/
}
/* - PHONE PORTRAIT - */
#media screen and (max-width: 450px) and (orientation: portrait){
/*...*/
}
I tried with and without the orientation parameter... I can't even figure out why my code isn't working well...
I watched few topics on this but it didn't help me...
Thanks for helping :-)
EDIT:
I'm using Bootstrap for the first time, does it change something on media queries ?
EDIT 2:
I saw something like #media screen and (max-width:screen-sm-max) when we use Bootstrap, should I use this instead of pxvalue ? I think it will still the same...
Try to put the smallest #media queries width block of code first.
/* - PHONE PORTRAIT - */
#media screen and (max-width: 450px) and (orientation: portrait){
/*...*/
}
/* - PHONE LANDSCAPE - */
#media screen and (max-width: 750px) and (orientation: landscape){
/*...*/
}
/* - IPAD PORTRAIT - */
#media screen and (max-width: 768px) and (orientation: portrait){
header{
background-size: 28vw 30vh, 34vw 38vh;
background-position: right 28vw top 3.5vh, right 17vw top 1vh;
}
header object{
left:10vw;
width:24vw !important;
}
header p{
font-size:20px;
top:10vh;
left:-2vw;
}
}
/* - IPAD LANDSCAPE - */
#media screen and (max-width: 1024px) and (orientation: landscape){
header{
background-size: 28vw 30vh, 34vw 38vh;
background-position: right 24vw top 3.5vh, right 21vw top 1vh;
}
header object{
left:16vw;
width:18vw !important;
}
header p{
font-size:14px;
top:16vh;
left:-2vw;
}
}
It solved this type of problem for me. Boostrap doc is following this structure too. (here #screen-sm-min are variables that you can set thank to LESS/SASS, but you cant replace it by fixed number)
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Personally I use something like that if it could help you :
#media (max-width:767px) {}
#media (max-width:767px) and (orientation:landscape) {}
#media (min-width:768px) and (max-width:991px) {}
let me say as first I am a CSS noob. I can freely accept any blaming
#media (max-width: 735px) {... }
#media (min-width: 735px) {... }
#media (width: 320px) {... }
#media (width: 360px) {... }
#media (width: 375px) {... }
#media (width: 414px) {... }
I have these things for able to make it sensitive.
I wanted to use max-width but failed not sure why but browser always choose another max-width expression and executes it so I just collected the mobile phone's width and made this.
And also I want to send same content to who has 360px and 320px is there any "or" expression may be I can minify it.
If I got it correct from your question, you can add the following media query.
#media (min-width: 320px) and (max-width: 360px) {
html { color: blue; }
}
I recommended using a different approach, either mobile first or desktop first using media queries. In that way you can simply address the correct layout to a lot of people without writing exceptions.
Mobile first
html { color: purple; }
#media (min-width: 600px) {
html { color: black; }
}
/* And go up the road */
Desktop first
html { color: purple; }
#media (max-width: 600px) {
html { color: black; }
}
/* And go down the road */
I am very keen to use media queries in my CSS but i am confused to how to use it. I have stand
my queries requirement is
if screen width is 100 to 480 then different style comes,
if screen width 481 to 600 then different style comes,
if screen width 601 to 800 then different style comes,
if screen width 801 then default CSS should work.
.class { /* default style */ }
#media (min-width: 100px) and (max-width: 480px) {
.class { /* style */ }
}
#media (min-width: 481px) and (max-width: 600px) {
.class { /* style */ }
}
#media (min-width: 601px) and (max-width: 800px) {
.class { /* style */ }
}
The basic relies on using this kind of queries:
#media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make
your site pretty on this range.*/
}
Please remember that when using responsive web design you should use percentages when possible also em for fonts.
media queries are now available for IE.
take a look in http://caniuse.com/#feat=css-mediaqueries when you can use them.
A polyfil I been using with good results is response.js
I believe something along the lines of:
#media screen and (min-width: 100px) and (max-width: 480px)
{
/* Change main container '.wrapper' */
.wrapper
{
width: 100px;
}
}
#media screen and (min-width: 480px) and (max-width: 600px)
{
.wrapper
{
width: 480px;
}
}
..etc
Is this possible? It seems like a neat solution to me, but I'm not sure if it will work.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Code for both portrait and landscape */
#media (orientation:portrait) {
/* Code for just portrait */
}
#media (orientation:landscape) {
/* Code for just landscape */
}
}
You should be able to nest #media rules this way in CSS3, but it isn't yet supported by most browsers. See this answer for details.
You would have to fully expand and repeat the top-level media queries for the inner rules for it to work across browsers (and I imagine the SCSS processor would generate something similar):
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Code for both portrait and landscape */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
/* Code for just portrait */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
/* Code for just landscape */
}
If you wanted to do this the best way is to use the high level media query in a link tag, and then the other queries inside the linked sheet.
In practice though most people cascade their CSS rules from a base sheet that covers the common stuff and then putting changes to that in each media rule-set.
I think not possible but you can write this format If you are using SASS css pre-processor.
example , you can copy this code and paste to https://www.sassmeister.com/ -and watch the output
SASS
#media only screen and (max-width: 767px) {
body{
color:red;
}
#media (orientation:portrait) {
body{
color:green;
}
}
#media (orientation:landscape) {
body{
color:orange;
}
}
}
Output CSS
#media only screen and (max-width: 767px) {
body {
color: red;
}
}
#media only screen and (max-width: 767px) and (orientation: portrait) {
body {
color: green;
}
}
#media only screen and (max-width: 767px) and (orientation: landscape) {
body {
color: orange;
}
}