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 )
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 */
}
I'm having a bit of trouble with my media queries.
Building a site using a purchased responsive wordpress theme, and am now customising it.
I'm running into an issue where, because of how the design behaves over a range of screen widths, I am using media queries to make adjustments whenever the design breaks.
Trouble is, various elements are breaking in different ways at different widths (not surprising).
So instead of getting a nice, exclusive range of media query sizes (eg: max-width: 480px, min-width: 481px --> max-width: 780px, min-width: 781px --> max-width: 960px, minwidth 961px) it's turning into an overlapping mess of queries.
Here is a sample of what I've got in my CSS so far, with CSS removed just to save space:
#media only screen and (max-width: 961px) {
/* upto 961px */
#media only screen and (min-width: 885px) and (max-width: 961px) {
/* 885px upto 961px */
#media only screen and (min-width: 768px) and (max-width: 884px) {
/* 768px upto 884px */
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* upto 767px */
#media only screen and (max-width: 550px) {
/* Shrinks top nav text size for smaller screens*/
#media only screen and (min-width: 481px) and (max-width: 550px) {
/* Adjusts search bar location*/
#media only screen and (max-width: 565px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 566px) and (max-width: 721px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 722px) and (max-width: 902px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 903px) {
/* Toggles correct Justified Image Grid for home page buttons */
Pretty messy huh? Please be nice, am still learning this stuff :)
So my main problem now is: the elements I'm controlling with the last 4 media queries (targeting the Justified Image Grid) contain very simple declarations - basically making certain elements display or not. I thought I'd defined these queries fairly exclusively, but they are not working the way I expect them to.
Is the problem possibly with my mess of other queries? (Even though the Justified Image Grid are not referenced in other queries?)
More than happy to take suggestions on how to handle queries in this kind of situation, which I'd imagine happens quite frequently with web builds...
EDIT:
Here is the link to the test page: http://dev.thecyclery.net.au/home-test/
There are two image grid elements, and I only want to display one at a time.
Thanks!
Jon
one way to simplify things a bit is to remove the min-width portions of the queries that have both a min and a max. Then while using only max-width queries you order them from largest to smallest.
#media only screen and (max-width: 961px) {
}
#media only screen and (max-width: 884px) {
}
#media only screen and (max-width: 767px) {
}
These will automatically override each other when the screen gets below each respective setting.
Personally I only use the max-width settings and adjust them accordingly, hopefully you can get away with the same thing if you set it up correctly.
One reason that you may be having trouble is that if two queries have some of the same size parameters (overlapping conditions) whichever one is located last will take precedence over the other, and this might not be your intended outcome.
(Also, my personal experience with purchased wordpress themes has been less than satisfactory, you are typically better off customizing _s or one of the twenty___ themes that come with wordpress. The trouble with purchased themes is that they are usually designed with a specific intent (or specific plugins)... an intent that is almost never the same as your own intent.)
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 create a responsive design using Twitter bootstrap. Everything is going well but I cannot figure out how to set a minimum width for desktop users.
When a user is on a desktop I don't want them to be able to shrink the browser to the point where they see responsive features meant for the phone (e.g. the navbar mobile button). I would rather just have a horizontal scroll bar when the browser gets too small. How can I get this functionality without affecting the mobile layout?
You can address this with a media-query. The only problem is that you have to set a fixed width for this, min-width doesn't seem to work in this case (tested in Firefox and Chrome). If this is fine for you, you can try the following example:
// Should be something > 1024
#media only screen and (min-device-width: 1300px) {
body {
width: 1300px;
}
}
To replicate the way that logicvault.com have their site working you would need to change the Bootstrap CSS so that you only have one media query which kicks in at 480px.
Here's the media query they have set:
#media only screen and (max-width: 480px){
// styles here
}
I was able to achieve this functionality by using Frederic's advice:
// Should be something > 1024
#media only screen and (min-device-width: 1024px) {
body {
min-width: 1025px;
}
}
However, I also needed to adjust the bootstrap responsive files so the styles were only applied to touch devices. I ended up including Modernizr on my page and looking for the touch class.
E.g. change:
#media (min-width: 768px) and (max-width: 979px) {
// Styles are here
}
to:
#media (device-min-width: 768px) and (device-max-width: 979px) {
.touch {
// Styles go here
}
#media only screen and (max-device-width : 640px) {
/* Styles */
}
#media only screen and (max-device-width: 768px) {
/* Styles */
}
This is what I have so far. The PSD mockup for the mobile site I'm working on, is 640px wide. The other one, the tablet version of the site, is 768px. I was able to test the site in my web browser by only using max-width, but now it's time to get this site working on the devices, and it's still rendering the regular full size web page. The two queries above are my best guess. Where am I going wrong?
This can be done with Level 4 Media Queries: (Browser Support is quite good - CaniUse)
Interaction Media Features
The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets)
The pointer media feature queries the quality of the pointer mechanism used by the device.
The hover media feature queries the user’s ability to hover over elements on the page with a given device.
So to answer the question...
Mobile devices/tables are similar in that:
1) The accuracy of the primary input mechanism of the device is limited.
This means we could use the following media query:
#media (pointer:coarse) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 200px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (pointer:coarse) {
div {
background: red;
}
}
<h2>The pointer media feature queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>
Codepen Demo
2) The primary pointing system can’t hover
So our media query would look like this:
#media (hover: none) {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover
}
NB: Chrome/Android prior to version 59 required the on-demand value for hover/any-hover media queries. This value was later removed from the spec and no longer required by Chrome from version 59.
So to support older versions of Android you need
#media (hover:none), (hover:on-demand) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 150px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (hover:none), (hover:on-demand){
div {
background: red;
}
}
<h2>The hover media feature queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>
Codepen Demo
NB:
Even if you were to connect a mouse to a mobile/tablet, the hover media feature still matches none since their primary interaction mode doesn't support hover.
If we do want to take secondary devices into consideration we could use the any-pointer and any-hover features
So if we wanted mobile devices connected with a pointing device to be treated like a 'desktop' we could use the following:
#media (any-hover: hover) { ... }
Extra reading
Interaction Media Features and their potential (for incorrect
assumptions)
https://css-tricks.com/touch-devices-not-judged-size/
Edit Note: This is specifically a method that worked with older browsers. The accepted answer has been updated to a more modern CSS that does have media queries that makes this easy. I mainly suggest using my older code for CSS specific to older browsers.
Instead of using specific widths initially, or messing around with orientations, or any other nonsense, I suggest using the following media tag...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
/* Your click-specific css goes here */
}
And what do you use these tags for? To set stuff for hover & click vs touch events.
Touch devices, other than a few devices in grey areas above addressed, have a very different resolution than desktop devices. Do -not- this to set design elements, but navigation elements. Some pudents may cry that some insanity with max-width may be better, but there's so many HD phones it's ridiculous that device-max-width quickly becomes useless.
However, you should use width media width queries. However, don't bother with max-device-width, just max-width & min-width. Let the above tags address your touch vs not touch users, let min-width vs max-width address based on window size and adjust site visuals.
Further, using orientation to determine if it's mobile or not is just silly, as even monitors can be placed in various orientations (a common setup I've seen for 3-monitors is a portrait center monitor and landscape side monitors.)
For width views, focus on making your site clean on various widths, ignoring what kind of device is actually accessing it, just make sure your screen displays cleanly at various sizes. That's good design that applies to both desktop and mobile. If they have your site in a small window at the upper left corner of their screen for reference (or quick distraction) while using the majority of their screen real estate elsewhere, and it should be for them, as well as mobile users, that your smaller widths are built for. Trying anything else is quickly going down a very painful and self-defeating path for web development. So for those smaller widths, you can set your widths to whatever you want, but I'll include a few I personally like.
So altogether, you should have something like this...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
#touch_logo {
display: inherit;
}
#mouse_logo {
display: none;
}
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
#touch_logo {
display: none;
}
#mouse_logo {
display: inherit;
}
/* Your click-specific css goes here */
}
#media (min-width: 541px){
/* Big view stuff goes here. */
}
#media (max-width: 540px) and (min-width: 400px){
/* Smaller view stuff goes here. */
}
#media (max-width: 399px){
/* Stuff for really small views goes here. */
}
Although, don't forget to include the following in your page's head:
<meta name='viewport' content="width=device-width, initial-scale=1" />
It may still break on some cases, but this should be more concise and more complete than many other solutions.
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes:
#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 (ie 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 %