Here are links to my CSS files:
<link rel="stylesheet" href="css/mobile_css_320.css" media="screen and (min-device-width: 0px) and (max-device-width: 320px)" />
<link rel="stylesheet" href="css/mobile_css_480.css" media="screen and (min-device-width: 321px) and (max-device-width: 480px)" />
<link rel="stylesheet" href="css/mobile_css_640.css" media="screen and (min-device-width: 481px) and (max-device-width: 640px)" />
<link rel="stylesheet" href="css/mobile_css_720.css" media="screen and (min-device-width: 641px) and (max-device-width: 720px)" />
<link rel="stylesheet" href="css/styles.css" media="screen, projection" />
Here is my link in styles.css (for Web Browsers on PC's)
#form_wrapper {
width: 320px;
margin: 0 auto;
}
In all other CSS files (targeting Mobile Devices), I do this:
#form_wrapper {
width: 92%;
margin: 0 auto;
}
However, in all Mobile devices, it goes straight to the last CSS file, styles.css and I get that div 320px on all devices no matter what.
I have only tested on Google's Chrome for Android on mobile devices as well as the stock Android webkit browser (for Android 4.0+). Is my code handling wrong?
Its probably loading all of them that are relevant, and since the last one is the most generic (mobile devices will match the media screen), it overwrites all styles defined in the previous stylesheets. CSS is a last-in wins in cases of a tie in specificity.
Try putting your generic stylesheet first, or combining them using media queries directly in the stylesheet itself.
CSS Specificity states that if two rules are the same e.g.
.text { color: blue; }
.text { color: red; }
Then the last one always prevails (in this case anything with a class of text would have red text)
So as your last stylesheet has no media query attached to it, it is always loading, and always overiding any styles you put in the mobile stylesheets before it.
To counteract this you could:
1) Put the desktop stylesheet first
2) Use a min-width media query on the last stylesheet, e.g.
<link rel="stylesheet" href="css/styles.css" media="media="screen and (min-device-width: 720px)" />
Related
My goal is to get a big button to show on the website when it's on mobile. I want it to show when the screen is at 600px width maximum. Also, I've written some code with my classmates.
We want it to show the div tag when it's on a mobile device.
We'd love your guidance, thank you.
#media screen and (width:600px;){
.button {
display: url(http://examplepicture.com/blablabla);
}
}
#media screen and (max-width:600px){
.button {
display: block; /* alternatively inline-block */
}
}
to show on mobile. You can then have the "default" setting in your main css file to have that div hidden:
.button {
display: none;
background-image: url('http://examplepicture.com/blablabla');
/* other properties go here */
}
This will make the .button class object be hidden on viewports greater than 600px, and visible if lower.
Demo
There is no such thing as "css = mobile". You have to bind some css rules to the screen resolution.
Since all mobiles have different screen resolution, you will have to subjectively choose a limit where you consider the screen being a mobile one.
Putting:
#media screen and (max-width:600px){
.button {
display: block;
}
}
Will show the button class to every screen with a resolution less than 600px, being a mobile or a small windowed computer browser. And it will not show on tablets with more than 600px width.
Any Windows or Linux or MacOS user on a desktop computer will be able to see the "mobile" version of a website if they shrink their browser's window.
EDIT: I updated the code.
make sure you have this in your <head> section of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
You have some syntax errors in your css. Try this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/8/
#media (max-width:600px){
.button {
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
}
And if you want the button not to be visible over 600px do this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/10/
.button {
display: none;
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
#media (max-width:600px){
.button {display: inline;}
}
Step 1 : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 2 : <div class="onphone">Hello</div>
Step 3 :
.onphone{display:block;}
#media screen and (max-width:768px){
.onphone{display:none;}
}
It's typically better to create individual CSS sheets for mobile devices... In that case you can do media selectors for your CSS sheets... Here is basically what I use in most cases
<!-- Desktop: Firefox , Chrome , IE -->
<link rel="stylesheet" media="all and (min-device-width:769px)"href="/CSS/Style.css"/>
<!-- Mobile devices: phone and ipad -->
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)"href="/CSS/phone_portrait_style.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px) and (orientation:landscape)"href="/CSS/phone_landscape_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)"href="/CSS/ipad_portrait_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)"href="/CSS/ipad_landscape_style.css" />
Then in each of those sheets, you can create the CSS you want to be shown on whichever specific device you'd like. So for a phone maybe the button is 240px when in portrait, but 320px in landscape.
Just be careful, because the way you have it, your CSS for phones will ONLY be displayed if the resolution is exactly 600px.
You should also note that in your mobile portrait css sheet you should have:
.button {
display: block;
width:100px;
background-image: url('http://examplepicture.com/blablabla');
}
and in the desktop css:
.button {
display: none;
}
And if you don't like this method, I was just trying to get you bonus points for different sized buttons for different phone/tablet orientations ;)
so on phone portrait css
.button{
display: block;
width:200px;
background-image: url('http://examplepicture.com/blablabla');
}
And BAM! You got some device-reactive CSS sheets that will impress mom and dad!
I'll try to be more specific. I have this stylesheets on my main control
<link href="/css/Fonts.css" rel="stylesheet" />
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="/css/mysite.css" rel="stylesheet" />
<link href="/css/responsive.css" rel="stylesheet" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/explorer.css" />
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
my container width for large screen comes from responsive.css where I have this code
#media handheld, only screen and (min-width: 1440px){
{.container:1400px;}
}
when I run my code in crome it is 1400px for large screen ignoring bootstrap container width this
#media (min-width: 1200px){
.container {
width: 1170px;}
}
and this
.container{
width: 940px;
}
but when I run my code in IE8 it picks up bootstrap container width
.container{
width: 940px;
}
and ignors
#media handheld, only screen and (min-width: 1440px){
{.container:1400px;}
}
The problem is I want explorer 8 not to ignore my code for large sreen(1400px). I know I cannot add it in my "explorer.css" as a media query inside a media query like this. i know it won't work.
/* IE8 */
#media \0screen
{
#media handheld, only screen and (min-width: 1440px){
.container:1400px;}
}
So I decided to add !important on this
#media handheld, only screen and (min-width: 1440px){
{.container:1400px !important;}
}
so it began to be of the size I want for the large screen but now it resizes very slowly(due to css3-mediaqueries.js which works slowly) and is not showing up mobile design .So now my question is whether
css3-mediaqueries.js supports mobile? Thanks for trying to help.
I'm using Bootstrap as my responsive framework.
I have got my own style sheet underneath the Bootstrap CSS files, with own Media Queries in it... but when it comes to viewing my web page on my iPhone 4, the heading and tags dont change to conform the way i want to on my phone.
Here is a snippet of the way my code looks:
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
i set the Media Queries as follow.....
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
I've already cleared the cache on my iPhone, but it's still not working
You may have missed the tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
before your imports.
Please refer to the documentation and ensure you followed all the steps:
http://twitter.github.com/bootstrap/scaffolding.html
this is the media query:
<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="desktop.css"/>
<link rel='stylesheet' media='screen and (min-width: 1023px) and (max-width: 1025px)' href='ipad.css' />
so that i get different style in size of 1024px but this worked on all browsers except chrome the new style appears in size of 1041px
is there any way to target chrome only to give it ipa style in different size
The following can be used to target CSS for Chrome (and Safari, as both are WebKit based):
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS rules */
}
See Question on webkit-min-device-pixel-ratio
i want to test the orientation by using css for ipad.This is the css file i use
#media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
#media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}
I am not sure whether this will work or not. I tried testing in an iphone emulator by changing the device width to 320px.But it didn't work. Do i need to change anything in this css file?
This is how i call the css in the main page
<link rel="stylesheet" type="text/css" href="iPad.css" />"
This is what I use for calling stylesheets with landscape and portrait stylesheets:
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/portrait.css">
I also found this link for you which is pretty helpful:
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
I resolved the problem by using this css.
#media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
#media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}