I'm trying to apply media query for laptop 15" and smaller with no success.
Here is my media query:
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { }
And:
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { }
I works for 13inch macbook pro but no for the 15".
Any help would be much appreciated.
Thanks
It might be a problem with min-device-width, as it should only work on mobile devices (tablet, smartphones):
min-device-width
Try using those (without -device-) so you can test it on your computer's browser.
min-width or max-width
Styles for Desktop
#media screen and (min-width: 1025px) and (max-width: 1280px) {
/* Styles for Desktops */
}
Also add inside tag
<meta name="viewport" content="width=device-width, initial-scale=1">
/*--cover up mac , mac-book---*/
#media only screen and (min-width: 1024px) and (max-width: 1920px) {}
/*--mac book pro , and mac-book retina display screen---*/
#media only screen and (min-width: 1920px) and (max-width: 2560px) {}
Retina Display media queries
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only
screen and (min-device-pixel-ratio : 1.5) { styles }
Related
From Large Desktop Screen to Small Mobile Device: which are the Media Queries we should use?
I am bit confused with this. I am trying to get this clearly
/*Small Desktop*/
#media (max-width:1920px){
}
#media queries apply standard CSS only where the device's screen meets certain defined criteria (height, width, and pixel-ratio; mainly)
The best resource I've found for media queries is https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Here's a snippet of the fantastic work there:
/* ----------- 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) {
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
I have these two but they are not working. I'm simulating in Chrome
/* Landscape*/
#media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* Portrait*/
#media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
If I remove 'and (orientation: landscape)' then the css in there works in the first media query.
What is the correct orientation, for both landscape and portrait ?
The HTML meta is set as
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
I don't have an iPad Pro but this works for me in the Chrome simulator.
/* Landscape*/
#media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* Portrait*/
#media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
Portrait medias query for iPad Pro should be fine as it is.
Landscape media query for iPad Pro (min-device-width) should be 1366px and (max device-height) should be 1024px.
Hope this helps.
Note that there are multiple iPad Pros, each with a different Viewports: When emulating an iPad Pro via the Chrome developer tools, the iPad Pro (12.9") is the default option. If you want to emulate one of the other iPad Pros (10.5" or 9.7") with a different viewport, you'll need to add a custom emulated device with the correct specs.
You can search devices, viewports, and their respective CSS media queries at: http://vizdevices.yesviz.com/devices.php.
For instance, the iPad Pro (12.9") would have the following media queries:
/* Landscape */
#media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }
/*Portrait*/
#media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }
Whereas the iPad Pro (10.5") will have:
/* Landscape */
#media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }
/*Portrait*/
#media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }
I can't guarantee that this will work for every new iPad Pro which will be released but this works pretty well as of 2019:
#media only screen and (min-width: 1024px) and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
/* ... */
}
This worked for me
/* Portrait */
#media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
#media only screen
and (min-width: 1112px)
and (max-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
}
Too late but may this save you from headache!
All of these is because we have to detect the target browser is a mobile!
Is this a mobile then combine it with min/max-(width/height)'s
So Just this seems works:
#media (hover: none) {
/* ... */
}
If the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none!
There are many cases that you can read from bellow links.
Described as well Also for browser Support See this from MDN
I tried several of the proposed answers but the problem is that the media queries conflicted with other queries and instead of displaying the mobile CSS on the iPad Pro, it was displaying the desktop CSS. So instead of using max and min for dimensions, I used the EXACT VALUES and it works because on the iPad pro you can't resize the browser.
Note that I added a query for mobile CSS that I use for devices with less than 900px width; feel free to remove it if needed.
This is the query, it combines both landscape and portrait, it works for the 12.9" and if you need to target the 10.5" you can simply add the queries for these dimensions:
#media only screen and (max-width: 900px),
(height: 1024px) and (width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
(width: 1024px) and (height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
// insert mobile and iPad Pro 12.9" CSS here
}
For those who want to target an iPad Pro 11" the device-width is 834px, device-height is 1194px and the device-pixel-ratio is 2. Source: screen.width, screen.height and devicePixelRatio reported by Safari on iOS Simulator.
Exact media query for portrait: (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)
iPad Pro 12th Gen - 2022, I have tried, and it worked.
Portrait:
#media only screen and (width: 1024px) and (height: 1292px) {}
Landscape:
#media only screen and (width: 1366px) and (height: 950px) {}
I'm trying to use media queries, however they aren't working when I go to my iPhone. When I resize my browser window it works fine though. They look like the following:
#media (max-width: 480px){...}
And I've including the following meta tag at the top of the file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Any idea why it wouldn't be working properly?
EDIT
Try this:
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
You can use this as reference for iPhones.
I am working on the this website. I have added the following code to make it hide the bottom menu when someone opens it on a mobile device,
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
.footer-p-1{
display:none;
}
}
/* Portrait */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
.footer-p-1{
display:none;
}
}
/* Landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
.footer-p-1{
display:none;
}
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
.footer-p-1{
display:none;
}
}
For some reason, the css does not work. Please guide me where am I wrong?
Thank you
Problem:
The browser currently outputs your CSS as:
-webkit-min-device-pixel-ratio is not valid any more as the w3.org CSS validator outputs:
Solution:
-webkit-min-device-pixel-ratio is deprecated and needs to be converted to min-resolution
You will need to unprefix the media query condition:
Unprefix Webkit device pixel ratio
I think you must not define Min-max but if you want to hide it for mobile device like with widt < 800px try this:
#media (max-width: 800px) {
.footer-p-1{
display:none;
}
}
comment the other and try only with this
I'm working on developing this responsive Wordpress site: http://www.allisoncassels.com/Test/ and having a problem with my media queries.
I coded the CSS for the following breakpoints:
/* Portrait Tablets */
#media only screen and (min-width: 768px) and (max-width: 959px)
/* Portrait Mobiles */
#media only screen and (max-width: 767px)
/* Landscape Mobiles */
#media only screen and (min-width: 480px) and (max-width: 767px)
On desktop, everything looks great. On my phone and tablet, some things are mobile and some things are still showing like the desktop (stuff I have display: none on is showing, div widths are off, etc.)
The only thing I can figure out is that it's related to my phone/tablet being retina display, but I don't see other sites having to factor that into their calculations...
Really baffled right now, I'll appreciate any help. Thanks
Put this in your head!!! :P
Inside the meta tag.
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Cheers,
Mark
You should add this meta
<meta name="viewport" content="width=device-width, initial-scale=1">
Try this media query for iPhone 6/6 Plus and Apple Watch CSS media queries
#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)
{ }
For Image responsive
img {
max-width: 100%;
}
This wordpress theme Avando is already responsive:
http://themefurnace.com/themes/?theme=Avando
you don't need to create some additional css
Update
My web host's server was crashing while I was working last night and I think that was affecting the files being properly propagated... All the responsive code works perfectly today.
Try adding a color css border around elements that are not displaying correctly, border:thin red solid; or change the background-color to figure out if you css selector is being used. Also, it will be usefull if you put in links to the page and point out the elements you are having issues with and the device/device browser you are testing on.