I am trying to build a seperate CSS file for a site for mobile. The regular site was not originally built with mobile in mind, but the site now needs mobile functionality. Problem is, I am not able to get the mobile css file to load on any phone device. I have tried it on my Droid Razor in two seperate browsers, I have also tried emulating it using this: http://www.mobilephoneemulator.com/.
I can't get the mobile CSS file to load either way. I am not sure why. I set a few divs and all images to display:none; just to see if it is working, but I am not getting any results. Any help would be greatly appreciated.
Below is my links to the css files.
<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />
<link rel="stylesheet" type="text/css" href="/stylesheets/content-sanford.css" media="only screen and (min-device-width: 481px" />
<link rel="stylesheet" href="/stylesheets/mobile-sanford.css" media="only screen and (max-device-width: 480px)" />
This is the mobile CSS file code:
#charset "utf-8";
/* CSS Document */
#sliderFrame{
display:none;
}
#slider{
display:none;
}
img {
dipslay:none;
}
div#player{
display:none;
}
You forgot some ")" in two first link
<link rel="stylesheet" type="text/css" href="/stylesheets/css_Sanford.css" media="only screen and (min-device-width: 481px)" />
<link rel="stylesheet" type="text/css" href="/stylesheets/content-sanford.css" media="only screen and (min-device-width: 481px)" />
<link rel="stylesheet" type="text/css" href="/stylesheets/mobile-sanford.css" media="only screen and (max-device-width: 480px)" />
Related
I have the media queries defined below. When I view it in 800x1280, it uses the mobile CSS. When I view it in 980x1280, it uses the portrait tablet CSS. It looks like, to me, in 800x1280, it should use the portrait tablet CSS. Any idea why it's not?
FYI - I'm testing it using the Responsive Design View in the Firefox browser.
<link rel="stylesheet" href="core.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" media="only screen and (min-width:680px) and (max-width:1024px) and (orientation:portrait)" href="tabletportrait.css" />
<link rel="stylesheet" media="only screen and (min-width:0px) and (max-width:679px)" href="smartphone.css" />
I have two style sheets, one for mobile, one for computers.
I want to use my mobile sheet by default.
my header checks:
<link rel='stylesheet' media='all' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 580px)' href='css/large.css' />
but I still seem to be using my large stylesheet when I check on a mobile browser! (iphone 4)
try to do something like this:
(code of mine)
<link href="css/mobile_portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px) and (orientation: portrait)">
<link href="css/mobile_landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (orientation: landscape)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)">
<link href="css/netbook.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)">
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1224px)">
(it's only and example)
My issue was that iphones seem to resize content.
I used :
<meta name="viewport" content="width=device-width, initial-scale=1">
...to prevent re-sizing in the phones browser.
Put this tag in the head, right before my media queries.
Now the media query functions properly.
I've got a really weird problem with the placement of my navigation after resizing the browser window. The best way to explain it is to show it I think.
After resizing to width < 600px and back to width > 600px:
https://www.dropbox.com/s/kjwbx85atcgcedu/Screen%20Shot%202014-02-16%20at%2018.57.50.png
Live version (404 page since about page has not been made yet):
http://lakitna.nl/responsive/?p=About
This issue is in Chrome. In safari the displacement is different, but also there. Other browsers have not been tested yet.
I am using media queries in my HTML header:
<link rel="stylesheet" href="css/global.css" type="text/css" media="only screen" />
<link rel="stylesheet" href="css/style600.css" type="text/css" media="only screen and (max-width: 600px)" />
<link rel="stylesheet" href="css/style1024.css" type="text/css" media="only screen and (min-width: 601px) and (max-width: 1024px)" />
<link rel="stylesheet" href="css/stylefull.css" type="text/css" media="screen and (min-width: 1025px)" />
Do you have any idea what the problem is and/or were it comes from? I simply do not know where to look.
I've added the following to my site to target phones/tabets etc:
<link href="assets/styles/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 640px)" >
<link href="assets/styles/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 641px) and (max-width: 768px)" >
<link href="assets/styles/main.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >
The stylesheets clearly work as they dynamically change within the browser, however the mobile devices I've tested are still targeting the main stylesheet, not the mobile versions.
Any suggestions?
Cheers
Apple Devices use min-device-width and max-device-width try to add
<meta name="viewport" content="width=device-width, initial-scale=1 />
to your header.
Hope this helps
I'm trying to create a responsive website. The design has 3 breaks, at 480px, 768px and 1024px. My link-section in the document head looks like this:
<link media="only screen and (max-device-width: 479)" href="320.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 480) and (max-device-width: 767)" href="480.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 768) and (max-device-width: 1023)" href="768.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 1024)" href="1024.css" type="text/css" rel="stylesheet" />
The problem with this is, that legacy devices that do not understand media queries don't load any of the style sheets.
Is there any way to include a stylesheet that is recognized only by devices that do not support media queries, like old Internet Explorers?
I would rather not include this stylesheet for all browsers and then reset or override it.
Thanks,
Jost