I am trying to target only the landscape mode of iPhone 7 plus but any combination of values does not seem to work. Attached is a codepen. Could somebody please make this work? :) . Codepen demo link
.box {
height: 30vh;
width: 20vw;
background-color: coral;
}
#media only screen
and (min-device-width : 1080px)
and (max-device-width : 1920px)
and (orientation :landscape)
and (min-resolution: 401dpi)
and (device-aspect-ratio:16/9)
/* and (-webkit-min-device-pixel-ratio : 2) */
{
.box {
background-color: blue;
}
}
HTML:
<main><div class="box"></div></main>
Try this media query:
/* iPhone 7+ Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
...
}
Working Snippet (Please try to run this on iPhone 7+):
.box {
height: 30vh;
width: 20vw;
background-color: coral;
}
/* iPhone 7+ Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
.box {
background-color: blue;
}
}
<main><div class="box"></div></main>
Hope this helps!
I found a fix!! It only targeted iPhone 7 plus landscape mode and not portrait mode!!
.box {
height: 30vh;
width: 20vw;
background-color: coral;
}
/* iPhone 7+ Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
and (min-aspect-ratio: 16/9)
{
.box {
background-color: blue;
}
}
<!-- HTML -->
<main><div class="box"></div></main>
Working demo here: plz test on iPhone 7 plus
Related
My goal is to resolve site-content overlapping the background slider (Plugin) in WordPress. Below the media queries are conflicting between device. If it works on Mobile devices then it creates an issue on ipads or any landscape mode.
Here is my CSS media queries.
/*------ MEDIA QUERIES------ */
/* Iphone 6,7 Portrait */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
.HomePageBody {
margin-top: -970px !important;
}
.nivoSlider {
top: 40px;
/* position:absolute; */
min-height: 500px !important;
width: 100%;
overflow: hidden;
}
/* .site-content {
margin-top:-320px
} */
}
/* Iphone 6,7 Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.HomePageBody {
margin-top: -110px !important;
}
.nivoSlider {
top: 40px;
/* position:absolute; */
min-height: 500px !important;
width: 100%;
overflow: hidden;
}
.site-content {
margin-top: -320px !important;
}
}
Since min/max-device-width has deprecated, you can use the orientation queries for portrait and landscape.
So your code will be like that:
#media (orientation: landscape) {
...
}
#media (orientation: portrait) {
...
}
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 -- */
}
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)
{ }
I have these media queries to apply different styles for iPhone 4 and iPhone 5
/* iPhone 4 (landscape) */
#media only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) {
.background img {
height: 5px;
}
}
/* iPhone 4 (portrait) */
#media only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait) {
.background img {
height: 10px;
}
}
/* iPhone 5 (landscape) */
#media only screen and (min-width:320px) and (max-width:568px) and (orientation:landscape) {
.background img {
height: 245px;
}
.logo img {
height: 205px;
width: 205px;
}
}
/* iPhone 5 (portrait) */
#media only screen and (min-width:320px) and (max-width:568px) and (orientation:portrait) {
.background img {
height: 210px;
}
.logo img {
height: 170px;
width: 170px;
}
.top-content h2 {
font-size: 1.8em;
line-height: 120%;
margin-bottom: 20px;
}
.main-container {
margin-top: 30px;
margin-left: 15px;
margin-right: 15px;
}
}
The problem is that on iPhone 5, the styles for iPhone 4 are applied too. How can I prevent this?
Another useful media feature is device-aspect-ratio.
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone < 5:
#media screen and (device-aspect-ratio: 2/3) {}
iPhone 5:
#media screen and (device-aspect-ratio: 40/71) {}
iPad:
#media screen and (device-aspect-ratio: 3/4) {}
Reference: Media Queries # W3C
In addition to Adam's helpful answer I've expanded this further to try and push my CSS to just the iPhone and iPad for both orientations in my case. The below may be useful for anyone looking at this question:
/* iPhone 5/5S Retina Display Portrait */
#media screen and (device-aspect-ratio: 40/71) and (max-device-width: 640px) and (orientation:portrait) {}
/* iPhone 5/5S Retina Display Landscape */
#media screen and (device-aspect-ratio: 40/71) and (max-device-width: 640px) and (orientation:landscape) {}
/* iPad 3/4/Air Retina Display Portrait */
#media screen and (device-aspect-ratio: 3/4) and (max-device-width: 1536px) and (orientation:portrait) {}
/* iPad 3/4/Air Retina Display Landscape */
#media screen and (device-aspect-ratio: 3/4) and (max-device-width: 1536px) and (orientation:landscape) {}
Media screen for the particular iPhone 4 is as follows:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3)
{
...
}
Seems that iPad rules overwrite iPhone4 related rules.
How can I solve this problem?
/* iPad */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
#theDiv { width: 400px; }
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
#theDiv { width: 600px; }
}
/* iPhoneRetina */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
#theDiv { width: 200px; }
}
You can bump the Retina display's pixel ratio to 2.
Here's the link to the Webkit blog post about it. Go down to the header "Conditional Inclusion".