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".
Related
I am running a small website on Joomla and cannot get the responsiveness to work. I am running media queries for the screen sizes and making adjustments as needed, but cannot get them to adjust for anything under 760px wide.
I've checked all four of my media queries and cannot find a solution. I'm sure it's something simple, but I cannot find it. I do
/* Note: Design for a width of 768px */
#media (min-width: 768px) and (max-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px;
}}
/* Note: Design for a width of 480px */
#media (min-width: 480px) and (max-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px;
}}
/* Note: Design for a width of 320px */
#media (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}}
I expect the main DIV to scale for 768px, 480px and 320px, but cannot get it to scale properly.
The website is located at:
https://crafted-development.com
My Css is located at:
https://www.crafted-development.com/templates/jf_calla-exteriors/css/template.css
You need to close the media tag also at the end with "}"
Also, instead of media, try adding "#media only screen and"
Example::
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
Also, the meta tag is necessary
<meta name="viewport" content="width=device-width, initial-scale=1">
Use this css
#media only screen and (min-device-width: 768px) and (max-device-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px !important;
}
}
#media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px !important;
}
}
#media only screen and (min-device-width: 320px) and (max-device-width: 479px)
{
.main, #jf-footer .main-inner1 {
width: 316px !important;
}
}
This turned out to be the solution: Thank you guys!
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
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'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
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)
{
...
}