Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Combine two html and make them operate differently

    Hi!
    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
    :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)" /

    : CODE

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

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •