View Full Version : Combine two html and make them operate differently

02-01-2012, 05:13 PM
I have one html that is created for computer viewers, and i have another that i have converted for mobile viewers.
Problem: I want the computer html to be shown when the browser window is larger than 481px and the mobile to shown when the browser is smaller than 480.

The mobile html is made out of the computer html.

What i understand is that i need to have two css files, one original and one that is called mobile.css(example). The mobile css has got to have the code

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and
(max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="only screen and
(min-width: 481px)" /


As you may understand, i'm quite the noob in this area, but help is very appreciated.

02-01-2012, 06:17 PM
Older browsers do not understand those width specifications and so will ignore any that include a width. Also with only those two you are not specifying styles for any media except the screen .

The way to resolve both these issues is to omit the media attribute from the first stylesheet and have that one apply all the general styles. You can then override them for specific situations in subsequent stylesheets that specify particular media and widths and just include in those stylesheets the changes you need it to make from what was specified in the first one (which will also be applied except for those things you override in the later one).

02-01-2012, 08:01 PM
Thank you for replying!

I am sorry to say that i don't really understand what you mean.
If possible, would you rephrase your answer in the "rookie-language"?:o