I am having a strange problem with my media queries. They seem to be working just fine on my mobile devices, but when I resize my desktop browser the changes are not applied. This makes using web inspector/firebug impossible to inspect my mobile styles. Here is my media query:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {}
You are calling device specific queries. If you want to test on browser window resize, you need to remove -device- from both min and max calls.
#media only screen
and (min-width: 320px)
and (max-width: 480px) {}
Related
I've been using media queries to target tablets and down just by writing:
#media only screen and (max-width: 1199px) { ... }
However, I came across a tablet this weekend whose resolution were even bigger than that, triggering a menu it wasn't supposed to see. Normally, I don't care since I use these queries to trigger design changes that normally looks good in that resolution but in this particular case, it's not good since a hover based menu showed up that's obviously really hard to use on a tablet.
So I've been tinkering a bit with writing a media query that triggers on EITHER max-width or both of the orientations, like this:
#media handheld, (max-device-width: 1300px), (orientation: landscape), (orientation: portrait) { ... }
However, this seems to trigger on my computer as well and I don't understand why. Anyone know why, or has a better solution to my problem?
It's because you are using , instead of and in you media query condition .
For example:
#media handheld and (max-device-width: 1300px) and (orientation : landscape) {
.div {....}
}
#media screen (max-width: 449px), handheld and (orientation:landscape) { ... }
Try this one.
I'm looking to find out how to perform css based on whether either one of two statements is true. For example:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
OR
and (max-device-width : 1024px)
and (orientation : portrait){
}
I'm making a multi-platform website and have finished the mobile version, however I want iPads to have the laptop/desktop version, all was working good with this:
#media only screen and (min-device-width: 0px){Mobile Version CSS}
#media only screen and (min-device-width: 500px){Other Version CSS}
But then I noticed after changing a mobile to landscape, it would switch back to the desktop mode, due to the width of the media query being less than the screens landscape width. What's the best set of media queries, that I can perform in two different queries, just for mobile and other platform, that take in account a phone being landscape or portrait? I don't want to have to repeat my CSS code through multiple media queries because of phones going landscape and such. I just want the mobile version to be active whether a mobile is landscape or portrait.
Thanks
That's nothing a quick google search couldn't have revealed to you: (first try) https://css-tricks.com/logic-in-media-queries/
media-query logic:
And: and
Or: ,
Not: not
In your case, your CSS would look like:
#media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
only screen and (max-device-width: 1024px) and (orientation: portrait) {
/* your css here */
}
Just some reminders:
Your media-query do not serve the situations "portrait and device-width < 768px" and "device-width > 1024px". You need to address those cases too somehow.
While an iPad (in ladnscape) has a screen-width of 1024px, you would present your websites desktop view to any other phones/tablets having a width of at least 768px, too. I don't think that's a good idea. But I don't know what your website looks like, so I assume you know what you're doing.
BTW: Wouldn't a grid-system like bootstrap do a lot for you?
I have media query in CSS:
#media only screen and (max-device-width: 480px) and (min-device-width: 320px)
When I open elements inspector in Google Chrome and select device iPhone 4, it shows different from the original iPhone 4s screen and some other phone screens.. Why? What do I do wrong?
How can I see the iPhone 4's original look of the page in my Google Chrome or other browsers? Is there any solutions?
How it looks on iPhone 4:
How it shows in Google Chrome, when I select device iPhone 4 (on the top left):
instead
(max-device-width: 480px) and (min-device-width: 320px)
use only
(max-width: 480px) and (min-width: 320px)
Why?
min/max-width
The width media feature describes the width of the rendering surface of
the output device (such as the width of the document window, or the
width of the page box on a printer).
min/max-device-width
Determines whether the output device is a grid device or a bitmap
device. If the device is grid-based (such as a TTY terminal or a
phone display with only one font), the value is 1. Otherwise it is
zero.
I fixed my problem by adding a <meta> viewport tag to <head>
<meta name="viewport" content="width=device-width,initial-scale=1">
Now I don't have to use (max-device-width: 480px) and (min-device-width: 320px)
(max-width: 480px) and (min-width: 320px) <- work fine for all devices
Anyway, thank you all for your response.
Thanks Stack Overflow for helping. I've got some custom css I'm using to tighten up a design. I keep running into this issue where if I change something in one media query say for the iphone 6, that change then affects another device say the iphone 5. Its becoming this issue were I'm constantly adjusting with no end in sight. Here are my #media break points I'm using.
/* IPHONE 6 PLUS */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
/* IPHONE 6 */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
}
/* IPHONE 5s */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/* IPAD LAYOUTS */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* IPAD LANDSCAPE */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
Any help would be greatly appricated.
I agree with Birdman, and you should consider a mobile first approach. Mobile first, however, means that the smallest device size is completely outside of any media query. The next size up will start the first media query. You only ever need a min-width, as these new styles will be in addition to the base styles, not overwriting them. Each media query created will continue to combine with those already called.
And instead of worrying about iPad this, or tablet that... worry about when your design elements start to look bad. All of the major browsers have intelligent enough emulators to test in different device sizes.
Here is a good article on the pros and cons. I always code mobile first, and never worry about styles colliding, unless I do it on purpose :)
https://codemyviews.com/blog/mobilefirst
When a device width falls between the media query's range, the styling will be applied. So if a device's width is 500px, it will first have the 6plus styling, which will then be overridden by the 6's styling, then the 5s'. Normally, it's not recommended to try to tailor your CSS for a specific device, but if you do want to, you'll need to make sure none of the ranges overlap, or they will just be overridden by whichever styling comes last.
I am looking to add some responsive web design to my site for iPad Portrait. I have my main css file (style.css) and then i have added the line below:
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />
However when i try to set a div's background colour to red or something then resize the window i cannot see any change when it gets to the iPad Portrait size.
The stylesheet im linking to looks like:
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
.myTile{background:red;}
}
I have tried it with and without this and no difference when i resize.
What am I doing wrong?
Any help would be great, I am just picking up responsive design.
Thanks
I would use:
#media screen and (max-width: 768px) {
/*styles*/
}
I also use max-width. What's the difference between max-width vs max-device-width? The difference, max-device-width only affects those devices that have a max width of XYZpx, so re-sizing a browser window on your desktop would yield no styling changes in relation to that particular media query. max-width, will yield styling changes on any device/browser that fits the media query. So re-sizing your your desktop browser and having the media query use max-width, you'd see the website as someone using an iPad would.
this is a great reference: Responsive Web Design