I used media queries in making my page responsive on mobile but notice that when the device rotates it doesn't effect the media query. How can I use it in a way that it still holds even when the screen rotates(landscape).
You should use Device orientation
Device Orientation
#media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
#media all and (orientation:landscape) {
/* Styles for Landscape screen */
}
for reference : 1) click me 2) me too
Related
I am helping to style an app that is being built in Alpha Anywhere. The goal is to use #media tag to enable different styles to accommodate small phones in portrait orientation, large phones in portrait orientation, phones in landscape orientation, and Tablets.
My thought was to use #media screen and... to define ranges of sizes and have style code within it's brackets that define appropriate container and font sizes to make each format ideal for the device it will be shown on.
Because I'm working in Alpha Anywhere, there is a tab for the CSS. I need to put all the CSS in this one location so I can't ref out to different .css file for each different style. My hope was to bracket the code for one style within one media range and the code for another style within another and so on. Can I have multiple line/regions defined by their #media ranges?
#media screen and (min-width: 150px) and (max-width: 350px) and (orientation: portrait) {
/* Style Code for Small Phone Portrait Orientation Here */
}
#media screen and (min-width: 351px) and (max-width: 560px) and (orientation: portrait) {
/* Style Code for Large Phone Portrait Orientation Here */
}
#media screen and (max-width: 415px) and (orientation:landscape) {
/* Style Code for Phone Landscape Orientation Here */
}
#media screen and (min-width: 561px) {
/* Style Code for Tablet Here */
}
When I organize my style code like this it appears to be heeding only the style from the last of the 4 sets of code(tablet style). Is there a way for me to style these different sizes/orientations on one page?
Start from mobile and write your default styles. Make small changes at the next breakpoint up, keeping it simple and only overriding what is necessary. Media queries for orientation will only complicate things, so use only min-width.
/* Styles for default */
#media screen and (min-width: 480px) {
/* Add styles for next size up */
}
#media screen and (min-width: 720px) {
/* Add styles for next size up */
}
#media screen and (min-width: 960px) {
/* Add styles for next size up */
}
For determining screen size I'm using media queries but I want determine if a device is in portrait or landscape mode using CSS so that I can have different background image as per screen size.
Any thoughts?
simply write media queries for landscape and portrait modes:
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
link here
I'm doing some css code to a website that uses a full cover background and I want to serve it with media queries to a several devices with different resolutions.
I've already figured out how to do that with all the iPhones and iPads doing this:
#media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPhone 2G/3G/3GS */ }
#media only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 4/4S */ }
#media only screen and (min-device-width:560px) and (max-device-width:1136px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 5 */ }
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPad 1/2 and iPad mini */ }
#media only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPad 3/4 */ }
And for some desktop screens:
#media only screen and (min-device-width:1280px), only screen and (min-device-width:1366px), only screen and (min-device-width:1440px) { /* some regular desktop resolutions */ }
#media only screen and (min-device-width:1680px), only screen and (min-device-width:1920px) { /* some larger desktop resolutions, likely hd screens */ }
Since the purpose of all this media queries is to satisfy only a full cover background using this css rule in each #media (with different images, obviously, to reduce server load and display a friendly background considering the specs between devices)...
html {
background:url("image.jpg") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;}
I have my doubts with doing this for retina screens (especially the Macbook Pro Retina, 13inch and 15inch models).
I guess that, using the same logic as above, this should be like this:
#media
only screen and (min-device-width:2560px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width:2560px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (min-device-pixel-ratio: 2) { /* for the 13inch model */ }
#media
only screen and (min-device-width:2880px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width:2880px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (min-device-pixel-ratio: 2) { /* for the 15inch model */ }
So... I hope this works in this way.
Also, I would like you to give me some advice on improving this. The main idea is that for each display resolution and device, a different image is served, to avoid overloading both the server and the client side (in this case, the browser).
This is old, but maybe these links help?
CSS Tricks retina display media query
Coder Wall - HD & Retina Display Media Queries
I am having trouble with: http://brybell.me/vipeepz/skeleton/
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
#logo {
margin-top:400px;
position:relative;
}
}
That is the media query code within the layout.css file of the skeleton boilerplate/ framework.
It does not seem to be picking up the media query, I have tried many things and it doesn't seem to be working.
There are two logos now, because I was doing some testing, but I really am just trying to do something simple similar to instagram's website. simple phone image with screenshot and then a logo and block of text beneath.
I would appreciate any and all help. Thank you very much. I have been frustrated with this because I had the site how I wanted it on desktop, but can't get things to reposition to where I want them to be.
Your inline style declaration is overwriting the media query in this case since inline styles have higher specificity. Try moving your inline styles into an external stylesheet and your media query for #logo should be picked up.
I'm trying to make my responsive CSS styles work only on tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want the mobile styles interfering with the desktop presentation at all. I have played around with countless media queries, but the result either the mobile styles are getting displayed on the desktop, or the mobile styles are displaying only on mobile devices but with only one set of rules (non-responsive). Is there a way I can keep the two completely separate?
My code I have right now goes like this:
/* regular desktop styles */
#media only screen
and (max-device-width: 600px)
{ ... }
/* mobile only styles when the device is 0-600px in maximum width */
#media only screen
and (max-device-width: 1000px)
{ ... }
/* mobile only styles when the device is up to 1000px in maximum width */
Why not use a media query range.
I'm currently working on a responsive layout for my employer and the ranges I'm using are as follows:
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I'm using:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %.
What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.
There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.
The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.
To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.
I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode. Essentially the fonts and line spacing looked fine in every other context, so I just needed the one exception for mobile landscape. This media query worked perfectly:
#media all and (max-width: 600px) and (orientation:landscape)
{
/* styles here */
}
Yes, this can be done via javascript feature detection ( or browser detection , e.g. Modernizr ) . Then, use yepnope.js to load required resources ( JS and/or CSS )