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) {}
Related
#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.
If suppose my device width is 800px, which media query will apply (execute)?
#media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px){
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px){
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px){
}
If i write the css for the device having screen size is between 768px to 991px and i declare it's css in the media query
#media only screen and (min-width : 768px){
}
then first two media queries will also gets applied how to avoid this.
You can use this three media query for 800px of width
based on your option
#media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px){
}
#screen-xs-max: 767px;
#screen-sm-min: 768px;
#screen-sm-max: 991px;
#screen-md-min: 992px;
#screen-lg-min: 1200px;
#screen-md-max: 1199px;
//xs only
#media(max-width: #screen-xs-max) {}
//small and up
#media(min-width: #screen-sm-min) {}
i want to design a web site.but tell me what are the sizes i can use for responsive website design.
that sizes must contain for mobile,tablets,pcs and other devices..
i want to use them in media queries.. :D
EX for Mobile:
#media only screen and (min-width: 500px) {
}
EX for Tablet:
#media only screen and (min-width: 800px) {
}
Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D
like that i want to know what are the reals sizes for these devices that i can use. :D
/* #1- Desktops */
#media (min-width: 980px) { ... }
/* #2- Portrait tablet to landscape and netbooks */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* #4- Landscape phones and down */
#media (max-width: 480px) { ... }
For actual device specifications, check out this link by CSS-tricks..
Here is the full list of media breakpoints
#media all and (max-width: 1690px) { ...}
#media all and (max-width: 1280px) { ...}
#media all and (max-width: 980px) { ... }
#media all and (max-width: 736px) { ... }
#media all and (max-width: 480px) { ... }
Check out for more informations about responsive device sizes : Medium
I hope so it's will help.
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;
}
}