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 Coder
    Join Date
    Jul 2014
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Mobile UI advice needed.

    Hey, So I want to make a mobile specific UI for my website to improve the look and functionality of it on mobile devices but I have some questions:
    1 - Whats the best way to attached a mobile only CSS, I thought about using
    Code:
    <link rel="stylesheet" media="screen and (max-device-width: 800px)" href="ssmobile.css"/>
    but is there any better/easier way to get a mobile specific css?
    2 - Whats the best way to add mobile specific JQuery code to a script file?
    3 - Whats the best way to test the new mobile ui on a desktop without having to upload it and check on my phone?
    4 - Whats the maximum & average screen sizes for mobile CSS?

    Please help as this is my first time diving into mobile CSS and specific JQuery code and I'm slightly daungted, I know how I want it to look & function and I know I can code it I just don't know the best way to attach mobile specific CSS and JQuery code. Any and all advice would be very appreciated.

  • #2
    New Coder
    Join Date
    Jul 2014
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So I've started trying to make this and I've already encountered a problem. My desktop.css works perfectly but when I shrink the window to kick in the mobile.css the page just goes white and nothing loads. Is something wrong with my code?
    Code:
    <link rel="stylesheet" type="text/css" href='ssdesktop.css'/>
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href='ssmobile.css'/>
    I'm really confused as this multiple css files and media queries is all new to me. I would use media queries in the same CSS file but I'm planning to overhaul most of the design so wanted it in a seperate file

    Update: Alternatively does anything interfere with this? such as @font-fact, JQuery .addClass/.css or css display:none etc?
    Last edited by aw555000; 08-06-2014 at 02:33 AM.

  • #3
    New Coder
    Join Date
    Aug 2014
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Linking a separate stylesheet using media queries in the case of "How To Use CSS3 Media Queries To Create a Mobile Version of Your Website":

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


  •  

    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
    •