I've looked through the stack overflow topics on this question, as well as some google search results but I can't seem to solve my issue.
I've created a stylesheet for mobile devices(mobile.css) which is essentially a copy of my main.css with changes to many of the attributes. When I load only mobile.css as the stylesheet it looks great on my iPhone, just how I want it to. However when I put both in, I am getting a mix of both, but more of the main.css
Any idea why?
<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
According to documents, syntax of loading another file in specific device/condition is like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
This will load only one css file for every single amount of width
For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640 pixels that many developers don't count this width as a mobile browser width. If you add this below meta tag in your document problem will be solved
<meta name="viewport" content="width=320">
This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here.
Its hard to know without any markup but i'm guessing you should do something like:
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
<link rel="stylesheet" href="base.css" /> // has all the common classes
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 320px)" />
<link rel="stylesheet" href="largescreen.css" media="screen and (min-device-width: 321px)" />
Your mobile stylesheet is loaded conditionally, which means that the computer will load only the main.css, while the iPhone will load both main.css and mobile.css.
If you want to start from scratch when you load the page on the iPhone, just add this chunk of CSS to the top of your mobile.css:
/*
YUI 3.4.0 (build 3928)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
It effectively resets the CSS.
#scott; may be you have to define your mobile.css after main.css like this:
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 480px)" />
or you can define your mobile css in your main.css like this:
#media screen and (max-device-width: 480px){
body {
background: #ccc;
}
}
EDIT:
write this <!DOCTYPE html> instead of <DOCTYPE html> in your html.
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 four main stylesheets and another two stylesheets for jQuery UI and Flexslider. One for reset stylesheet, one for main stylesheet and another two for media queries. The problem is that the stylesheet with (max-width:767px) won't be applied while the main stylesheet and the stylesheet for the width between 768px to 1259px work well.
Here is my markup
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:768px) and (max-width:1259px)" href="css/responsive_768-1259.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width:767px)" href="css/responsive_xxx-767.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.4.custom/css/ui- lightness/jquery-ui-1.10.4.custom.min.css" />
<link rel="stylesheet" type="text/css" href="js/FlexSlider-version-2.2/flexslider.css" />
So, please help me figure out what's wrong at this point and how can I make the stylesheet with (max-width:767px) work.
Note that the main stylesheet style.css is applied for the width more than 1260px which is the width of my main container.
It would be great if you could combine both the css ie. responsive_768-1259.css and responsive_xxx-767.css into one say responsive.css
Your responsive.css should contain the following.
#media screen and (min-width:768px) and (max-width:1280px){
/*-----All of your responsive_768-1259.css goes here---*/
}
#media screen and (max-width:767px){
/*-----All of your responsive_xxx-767.css goes here---*/
}
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 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)" />
I am using a single stylesheet for both mobile and desktop and utilizing #media all. The queries work on the desktop, but the stylesheet will not load at all on mobile. I have tried iOS and Android. I am also using the tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
and
<link href="http://localhost/Atoz/css/styles.css" type="text/css" rel="stylesheet" media="all"/><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
here is my
Use the code below
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />
Mobile Related jQuery Plugins are below. it will make your life easy.
http://jquerymobile.com/
http://jqtjs.com/
http://phonegap.com/