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) {
...
}
Related
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
I am a beginner to coding and currently making an app for a uni assignment. I am currently only using html and css until I get it right and then I will add JavaScript. The problem I am having is that my code is responsive on chrome for the set devices I need, but when I preview it in any other browser and on macs, the #media rules don't seem to be working.
This is my current css
body {
background-color:#F4BAAE;
background-image:url("Images/Pattern Landscape.png");
background-size:cover;
}
#logo {
background-image: url("Images/Logo.png");
background-repeat:no-repeat;
background-size 400px 400px;
width:100vw;
height:100vh;
background-position:top;
position:fixed;
margin:-10px;
}
#start {
background-image:url("Images/Start.png");
background-repeat:no-repeat;
position:fixed;
border-radius:15px;
background-position:bottom;
width:600px;
height:300px;
}
/* ----------- Webpages ----------- */
#media only screen and (min-device-width:1024px) {
#start {
background-size: 600px 300px;
top: 80%;
left: 50%;
transform: translate(-50%, -20%);
}
#logo {
background-size:500px;
top:80px;
}
}
/* ----------- Iphone 6 ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
#start {
background-size:180px 80px;
width:180px;
height:80px;
}
body {
background-size:667px auto;
}
}
/* Portrait */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -80%);
}
#logo {
background-size: 150px;
top:54px;
}
}
/* Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -80%);
}
#logo {
background-size:130px;
top:40px
}
}
/* ----------- Ipad ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
body {
background-size:1024px auto;
}
}
/* Portrait */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#start {
background-size: 400px 180px;
top: 90%;
left: 50%;
transform: translate(-50%, -80%);
}
#logo {
background-size:300px;
top:50px
}
}
/* Landscape */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -90%);
background-size: 340px 130px;
}
#logo {
background-size:320px;
top:50px;
}
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
#start {
background-size:180px 80px;
width:180px;
height:80px;
}
body {
background-size:640px auto;
}
}
/* Portrait */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -90%);
}
#logo {
background-size:150px;
top:54px;
left:10px;
}
/* Landscape */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -90%);
}
#logo {
background-size:130px;
top:40px;
}
}
Lose the 'device' #media (min-width: 600px) { ... }
On another note... I applaud you're hard work, but your letting things get too complex.
body {
background: red;
}
#media (min-width: 400px) {
background: blue;
}
#media (min-width: 700px) {
background: green;
}
Small-screen-first... no device specific targeting... create a break when things get ugly... repeat...
(you can use 'only screen and' if you research it and think it's important)
(i'd ditch the ids for styling... use classes)
You have -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, etc in the media queries. -webkit-* is a browser prefix and will only apply to safari/chrome. Unless you only want the media query to fire for a webkit based browser, you likely want to use the non-prefixed versions of those instead. Like device-pixel-ratio, min-device-pixel-ratio, etc.
I have this media query css: somehow it just won't pass validation, but if I take out the orientation queries, it will validate successfully. I simply cannot find anything wrong with it. all curly brackets are balanced,what could be wrong?
/* media query---MOB */
#media screen and (min-width:200px) and (max-width: 640px) {
/* ....CSS classes.... */
#media only screen and (orientation: landscape) {
.loginImgDiv {
margin-left: 70%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: landscape)*/
#media only screen and (orientation: portrait) {
.loginImgDiv {
margin-left: 45%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: portrait)*/
} /*End of media query---MOB */
I think you have to separate out both orientations you cannot mix them
check this link orientation reference
change it to the following
#media screen and (min-width:200px) and (max-width: 640px) and (orientation:landscape){
/* ....CSS classes.... */
.loginImgDiv {
margin-left: 70%;
width:100%;
height:auto;
}
}
#media screen and (min-width:200px) and (max-width: 640px) and (orientation:potrait){
.loginImgDiv{
margin-left: 45%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: portrait)*/
/*End of media query---MOB */
Hope it helps
Hello: I am trying to have my CSS (wordpress) change on different devices (responsive). I am using #media queries in my child theme css file. But I am finding that my queries are "overlapping" for iPad and iPhone.
here is what I am using for iPad:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and here is what I am using for iPhone:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
I have found that on my iPhone - it is using both of the styles within both the queries…
I also have a plugin I use called "mobile" which allows me to use "is_mobile" and "is_tablet" etc which are very helpful…
so what I am trying to do is ensure that my CSS only applies on a mobile phone, or only applies on a tablet, and it seems these media queries are not as reliable as I thought…
the mobile plugin works good in separating them out; but i cannot use PHP if statements in the "style.css" file
So here are my questions:
is there a better way to write the two #media queries so they more clearly only work on the devices that I want?
thanks so much...
This is what I use for it to change css depending on the width of the screen. Hope it helps.
#media only screen and (max-width: 768px) {
body
{
margin:0px;
}
#wrapper
{
min-width: 0px;
width:auto;
}
#content
{
margin-left: 0px;
}
#nav
{
float:none;
width: auto;
padding: 0px;
}
#nav ul
{
text-align: center;
}
#nav li
{
display: inline;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0.75em;
padding-right: 0.75em;
}
footer
{
margin-left: 0;
}
}
#media only screen and (max-width: 480px) {
body
{
margin: 0px;
}
label
{
float: none;
text-align: left;
}
#wrapper
{
width: auto;
min-width: 0;
margin: 0;
}
#content
{
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-right: 1em;
padding-left: 1em;
}
h1
{
margin: 0;
font-size: 1.5em;
padding-left: 0.3em;
}
#nav ul
{
padding: 0px;
}
#nav li
{
display: block;
margin: 0px;
border-style: solid;
border-width: 2px;
border-color: #330000;
}
#nav
{
display: block;
}
#content img
{
float: none;
padding: 0px;
margin: 0.1em;
}
#mobile
{
display: inline;
}
#desktop
{
display: none;
}
}
/* 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 */
}
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)
{
...
}