We have the following CSS which works for all iPads except for iPad Pro 12.9:
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.pp-button-1 {margin-bottom: 10px;)
}
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait */
#media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
.pp-button-1 {margin-bottom: 0;)
}
/* ----------- iPad Pro 11 2018 " ----------- */
/* Portrait */
#media only screen
and (min-width: 834px)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 0;}
}
/* ----------- iPad Pro 11 2020 " ----------- */
#media only screen
and (min-width: 834px)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 0;}
}
/* ----------- iPad Pro 11 2021 " ----------- */
#media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
.pp-button-1 {margin-bottom: 0;}
}
/* ----------- iPad Pro 9 " ----------- */
/* Portrait */
#media only screen
and (min-width: 1024px)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 10px;}
}
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
#media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 0;}
}
Our site https://mandoemedia.com displays with a gap above one of the buttons on an iPad Pro 12.9:
which is produced by CSS:
.pp-button-1 {
margin-bottom: 10px;
}
Note the last CSS rule which targets iPad Pro 12.9 taken from this page:
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
#media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 0;}
}
However this margin-bottom: 0; is not taking effect.
EDIT: What is taking effect is:
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.pp-button-1 {margin-bottom: 10px;)
}
Why is the iPad 3, 4 and Pro 9.7" media query active for an iPad Pro 12.9?
I think the below should work, attaching screenshots.
.padding-20-20.mobile-centered {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
Related
I have different media queries for different devices, each of them works fine (if I leave only 1 of them), but if I put all media queries in my code only query with for large screen devices forks fine.
this one works fine:
#media screen and (max-width: 1280px), screen and (max-height: 800px) {...}
and these don't work at all
#media screen and (max-width: 640px), screen and (max-height: 360px) {...}
#media screen and (max-width: 360px), screen and (max-height: 640px) {...}
I need to make media query for every device (including landscape and normal mode).
How should I do this?
#media (max-height: 640px) and (max-width: 360px) {
/* CSS stuff */
}
#media (max-height: 360px) and (max-width: 640px) {
/* CSS stuff */
}
try to do it like this.
add this if you havent
<meta name="viewport" content="width=device-width, initial-scale=1.0">
you can also nest queries
#media screen and (min-height: 40px) {
#media screen and (min-width: 50px) {
/*enter css here to apply for both condition*/
}
}
Visit this link. Media Queries For Standard Devices.
Sample:
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
See this too.
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width: 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* Styles */
}
/**********
iPad 3
**********/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width: 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
Hi I wrote media query to have responsive view of navbar in ipad. My media query is not working.
.nav-tabs>li>a {
color: #2b2b2b;
font-size: 13px;
line-height: 26px;
padding: 4px 12px;
outline: none;
margin-left: 50px;
position: relative;
display: block;
}
#media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.nav-tabs>li>a {
color: #2b2b2b;
font-size: 13px;
line-height: 26px;
padding: 4px 12px;
outline: none;
position: relative;
display: block;
}
}
Any suggestions why it is not working?
device-width and device-height are both deprecated media features, you should use max(/min)-device-width and max(/min)-device-height instead.
You can check the list of available media features here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Chris Coyier at CSS-tricks wrote a really good - slightly outdated - reference for almost all devices. The code below relates to I-pads and how to specifically target them with CSS.
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
When i am taking min-width:368px; in desktop mode it is working but after that as i am using media queries and i am converting it to max-width:368px (for mobile and tablet) and it is not working.It is taking min-width value not max-width value. Why?.
Example:
min-width: 368px;(desktop );
max-width: 368px;(mobile, tablet);
try this :
#media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
#media screen and (max-device-width: 640px) and (orientation:landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
#media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
#media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
#media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
#media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
#media screen and (min-width: 1024px){
/* some CSS here */
}
I've finally worked my website on mobile phones, landscape and portrait, but I still am not being able to work it on tablets!
I've used media queries to make my website work on mobile phones, here's what I did:
#media screen and (max-width: 1024px) {
body{
position: relative;
left: 100px;
}
.pintro{
position: relative;
top: 180px;
width: 500px;
}
.hintro{
position: relative;
top: 180px;
}
/* The rest of my code */
}
#media screen and (max-width: 1024px) and (max-height: 400px) {
body{
font-family: 'Noto Sans', sans-serif;
background: url("nature-blur-tree-greenex.jpg") no-repeat center center fixed;
width: 100%;
max-width: 900px;
margin: 0 auto;
position: relative;
right: 8%;
}
.pintro{
position: relative;
line-height: 50px;
left: -100px;
}
/* The rest of my code */
}
I then tried doing that with tablets, in this form:
#media only screen and (min-device-width: 768px){
.footer{
position: reltive;
top: 1000px;
}
}
But, that didn't work. I would be very grateful if someone provided me with a media query which I can put in my CSS for my site to work on tablets.
Thanks.
try using this codepen
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
What are the best width ranges for detecting media queries in a responsive design?
I would like to cover all Desktop/Laptop monitors( with one orientation) in 4 media queries but I do not know if it is possible for example: small monitors, medium monitors, large and extra large monitors.
For example in this code
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {}
I think we need still to device the Desktops and laptops media into three sub media as small (like 13" to 14 laptops), medium (like 15 to 17) and large (over 22#). I know that the browser resolution is different than screen resolutions but let's say we have browsers in full-screen mode in all formats.
Try this one with retina display
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Update
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width: 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* Styles */
}
/* iPad 3 (landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPad 3 (portrait) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width: 1824px) {
/* Styles */
}
/* iPhone 4 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 4 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 (landscape) ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 (portrait) ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ (landscape) ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ (portrait) ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S4 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S4 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 (landscape) ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 (portrait) ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
You can take a look here for a longer list of screen sizes and respective media queries.
Or go for Bootstrap media queries (archived):
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Update:
Bootstrap 5 breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Additionally you might wanty to take a look at Foundation's media queries with the following default settings:
// Media Queries
$screenSmall: 768px !default;
$screenMedium: 1279px !default;
$screenXlarge: 1441px !default;
Update:
Foundation 6 breakpoints
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
best bet is targeting features not devices unless you have to, bootstrap do well and you can extend on their breakpoints, for instance targeting pixel density and larger screens above 1920