I found out my Droid has a max width of 800 pixels, which I think some lower-resolution computers are smaller than, but I want my Droid to display the mobile CSS, so I am not sure max device width is the best solution. So does anybody know how I'd design my CSS link tags so that the mobile CSS is used only by smartphones while the desktop CSS is used only by desktop computers (including the kind with a width under 800px)?
Responsive Web Design, using media-queries
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
I tried the solutions above, but they didn't work for iPad in landscape mode. The iPad Landscape is 1024 px.
So my solution was:
#media only screen and (min-width: 1025px) {
.myClass {
/*...your desktop-only style...*/
}
}
#media (pointer: fine) {
body {
background-color: red;
}
}
The gap between mobile and desktop devices is getting closer and closer -consider, for example, tablets or the recently new hybrid devices.
As Aaron points, you might want to define different rules based on device screen (min-width or max-width). Eg:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
A different criteria you might want to use is targeting devices based on the their screen capabilities:
Touchscreen media-queries
Related
I have a website. The page width is perfect in 15.6 laptops.
But when it comes to larger displays, it gets ruined. Can you please help?
any #media styles to be added?
Thanks
It seems you have written that CSS specially for your screen's resolution. To fix that you need to use media queries. Example:
#media (min-width: 1280px) {
width: 1120px;
}
I checked and you have a similar problem on smaller screens. You would like to apply a mobile-first strategy, so the layout looks good on all screens. Apply the same strategy (media queries) to set diffences sizes for different resolutions. The most common solution is to use 3 breakpoints. Example:
#media (min-width: 768px) { }
#media (min-width: 1280px) { }
#media (min-width: 1440px) { }
The CSS that you write inside those media-queries will target different screen sizes, but also the CSS in the smallest media-query will work in the next ones if it is not overrriden.
Please give width by % value if you give that in px it will change for different
I'm using media queries to make a mobile version of a website for a client. When i resize the browser the media queries do not take effect, however they do take effect when the site is viewed on each device - i'm just curious as to why the media queries don't take effect when i resize the browser window itself i.e. Firefox.
Any input is much appreciated.
Code i'm using:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 720px) {
#container {
width: 100% !important;
}
}
If you are using attribute: max-device-width or min-device-width, it will work only on devices with that width and will ignore the manual browser resizing.
You should change the attribute to: max-width / min-width.
#media screen and (min-width: 1024px){
/* some CSS here */
}
Check here:
In CSS media the difference between width and device-width can be a bit
muddled, so lets expound on that a bit. device-width refers to the
width of the device itself, in other words, the screen resolution of
the device.
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
change your code to -
#media only screen
and (min-width : 320px)
and (max-width : 720px) {
#container {
width: 100% !important;
}
}
alternately you can keep your previous code and check the responsive nature of your website in local computer by Mozilla Responsive Design View feature - shortcut 'Control+Shift+M'
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 )
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
}
How to write CSS only for devices which are below than 320px in screen width, but not for all?
I want to write CSS like
Only example to explain to question
devices with min-width of 300 px { color:red}
devices with max-width of 299 px { color:blue}
And how to control Landscape mode in both condition?
myselector { color: blue; }
#media screen and (min-width: 300px) {
myselector {
color: red;
}
}
Though you may need to adjust this as needed depending on whether you care about CSS px width of the viewport or CSS px width of the device screen or something else. That wasn't clear from the question.
There is a wonderful article that can explain it much better than I can here:
http://www.alistapart.com/articles/responsive-web-design/
I find that this code isn't very reliable on feature phones and some blackberrys. In which case I use Device Atlas to get the width on the server side.
#media only screen and (max-width: 299px) {
color:blue;
}
#media only screen and (min-device-width: 300px) {
color:red;
}
It's not as famous as screen and (max-width: or min-width) but CSS3 media queries also allow you to apply css depending on your orientation device.
A code example
#media screen and (orientation:portrait) {
/* Portrait styles */
}
#media screen and (orientation:landscape) {
/* Landscape styles */
}
See there specification :
http://www.w3.org/TR/css3-mediaqueries/#orientation
You could do this using javascript.
if (document.clientWidth < 300) {
document.getElementById("yourElement").style.color="blue");
} else if (document.clientWidth >= 300) {
document.getElementById("yourElement").style.color="red");
}
Or something like that.
You could probably also find a way to include a different style sheet if it's under a certain pixel width. I'm not exactly sure how to modify a <head> with JS, though, so you'll have to wait for another answer or google around a bit.