I am writing media queries to my slider. for that sider width is 100% and height should be given manually. Thats why I have written #media queries for every width like
#media only screen and (width : 320px) and (height: 568px) {
.demo .zoomer_wrapper { height: 450px; }
}
#media only screen and (width : 568px) and (height: 320px) {
.demo .zoomer_wrapper { height: 230px; }
}
I am testing the resolutions in http://cybercrab.com/screencheck/ and firefox. Here every thing is working fine for every set of width and height. But when I checked in a particular device those are not working. Pls help me with this.
Media queries for phones and tablets should look like :
#media only screen and (max-device-width : 320px){}
Documentation
Edit
Exemple (and only an exemple, not tested) :
/*if landscape*/
#media only screen and (max-device-height: 320px) and (orientation : landscape){
.demo .zoomer_wrapper { height: 230px; }
}
#media only screen and (max-device-height: 800px) and (orientation : landscape){
.demo .zoomer_wrapper { height: 710px; }
}
#media only screen and (max-device-height: 960px) and (orientation : landscape){
.demo .zoomer_wrapper { height: 870px; }
}
/*if portrait*/
#media only screen and (max-device-height: 320px) and (orientation : portrait){
.demo .zoomer_wrapper { height: 230px; }
}
#media only screen and (max-device-height: 480px) and (orientation : portrait){
.demo .zoomer_wrapper { height: 390px; }
}
#media only screen and (max-device-height: 640px) and (orientation : portrait){
.demo .zoomer_wrapper { height: 530px; }
}
Related
I have the following media screen resolutions.
/*IPHONE 5 */
#media screen and (min-device-width : 320px) and (max-device-width :
568px) and (orientation : portrait) {
.box h1 {
top: 40px;
font-size: 1.5em !important;
}
}
/*IPHONE 5 */
#media screen and (min-device-width : 320px) and (max-device-width :
568px) and (orientation : landscape) {
.box h1 {
padding: 50px;
font-size: 2em !important;
}
}
/*IPHONE 7 */
#media screen and (min-device-width : 375px) and (max-device-width :
667px) and (orientation : portrait) {
.box h1 {
font-size: 2em !important;
}
}
/*IPHONE 7 */
#media screen and (min-device-width : 375px) and (max-device-width :
667px) and (orientation : landscape) {
.box h1 {
padding: 55px;
font-size: 2.1em !important;
}
}
The Problem is now, that if i change something inside the IPHONE 5 landscape , it dosen't do anything. But if i change something inside the IPHONE 7 resolution landscape it takes effect for the IPHONE 5 and IPHONE 7.
So what is wrong ?
EDIT
My HTML:
<div class="box">
<h1 id="suchen"><span>Suchen</span></h1>
<h1><span>Favoriten</span></h1>
<h1><span>Neu</span></h1>
</div>
Try this
/*IPHONE 7 */
#media screen and (min-device-width : 375px) and (max-device-width :
667px) and (orientation : portrait) {
.box h1 {
font-size: 2em !important;
}
}
/*IPHONE 7 */
#media screen and (min-device-width : 375px) and (max-device-width :
667px) and (orientation : landscape) {
.box h1 {
padding: 55px;
font-size: 2.1em !important;
}
}
/*IPHONE 5 */
#media screen and (min-device-width : 320px) and (max-device-width :
568px) and (orientation : portrait) {
.box h1 {
top: 40px;
font-size: 1.5em !important;
}
}
/*IPHONE 5 */
#media screen and (min-device-width : 320px) and (max-device-width :
568px) and (orientation : landscape) {
.box h1 {
padding: 50px;
font-size: 2em !important;
}
}
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
There is a need to scale media requests with one image (logo) for each mobile device: iPhone 5, 6, 6+, iPad's, as well as on large screens.
Accordingly, I almost need to specify a style in the form of width, etc. For portrait and landscape orientation.
Of all works only for the iPhone 6, iPad's and large screens (=> 1600px)
For small screens (320x480) and iPhone 6+ does not work (check in Chrome)
For iPhone 6+ media query applied as for iPhone 5...
Tell me please, what's wrong in my code?
I will be extremely grateful!
Here's the CSS:
#media only screen and (max-width: 320px) and (max-width : 480px) {
.logo-mobile img {
width: 150px;
transform: translateY(-7px);
}
}
#media only screen and (min-width: 321px) and (max-width : 480px) {
.logo-mobile img {
width: 150px;
transform: translateY(-7px);
}
}
#media only screen and (min-width: 320px) and (max-height: 568px) and
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 144px;
transform: translateY(-7px);
}
}
#media only screen and (min-width: 320px) and (max-height: 568px) and
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 144px;
transform: translateY(-7px);
}
}
#media only screen and (min-width: 375px) and (max-height: 667px) and
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 144px;
transform: translateY(-8px);
}
}
#media only screen and (min-width: 375px) and (max-height: 667px) and
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 100%;
transform: translateY(-11px);
}
}
#media only screen and (min-width: 414px) and (max-height: 736px) and
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
width: 144px;
transform: translateY(-8px);
}
}
#media only screen and (min-width: 414px) and (max-height: 736px) and
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
width: 144px;
transform: translateY(-8px);
}
}
#media only screen and (min-width: 768px) and (max-width: 1024px) and
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
width: 100%;
transform: translateY(-8px);
}
}
#media only screen and (min-width: 768px) and (max-width: 1024px) and
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
width: 100%;
transform: translateY(5px);
}
#media only screen and (min-width: 1600px) {
.logo-mobile img {`enter code here`
width: 100%;
}
}
Well you could start by ensuring you added the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You could also consider adding appropriate prefixes to your CSS3 selectors like so...
-webkit-transform: translateY(8px)//Chrome
-o-transform: translateY(8px) //Opera
and so on. You could check w3schools for a complete list of css3 prefixes. I hope this helps...
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)
{ }
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".