#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0

    Media Query for Responsive CSS


    I'm trying to edit a website I made last year to incorporate responsive design. Having read some articles from various sources, it seems one of the more common ways of doing this is using a @Media query tag in the CSS.

    I've had some success to this point, the website reduces to how I want it to display if you reduce a browser window on your PC to 480px. However, when you view it on a smartphone it does not look the same. I assume I'm missing something simple in the code for smartphones but I'm stuck.

    Links below:

    www.designercurtains.biz/test/index.htm
    www.designercurtains.biz/test/descurt.css

    Any help greatly appreciated as always!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Thanks Kravvitz for your reply. I actually did include the viewport code previously but when it was displaying differently on different devices I wondered if the initial scale rule had anything to do with it and removed the code to see what happened. I then promptly forgot about removing it when this error started lol.

    I think I'm struggling to understand the Media Query fully.

    I've now set device width to 320px, initial scale=1 and my media query is set to activate at 320px. All this works lovely on my iPhone, and bar a few tweaks looks generally how I'd want it to.

    My struggle now is to get it to look like that on all/most smartphone devices.

    What's the best way of achieving this? Making more media querys for more sizes? i.e another query at 480px?

    I'm currently resizing divs to 320px for the media query. Is it better to use % for divs when using this rule?

    Its a lovely and interesting feature to try and learn!

IMN logo majestic logo threadwatch logo seochat tools logo