The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS responsive help

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #39243

    I am trying to load a stylesheet for responsive design and I tried it this way

    this is being loaded into wordpress

    It works, I see the stylesheet in the header and it does link to the stylesheet. But when I visit the site on my droid, I don’t see any changes. Do you know why?


    Did you try putting that into the stylesheet directly, like:

    @media only screen
    and (max-width : 480px) {
    .outermargin {
    width:100%; margin:5px auto;
    I need to know if that works. :) I don’t have a cellphone.


    There’s a thread here:
    Says your screen thinks it is 845px. I thought those screens were only about 2-3 inches across, no? try 845 + ?


    One user says that all the documentation is off because it’s using zooms and things. Maybe this one:
    @media (-webkit-min-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (min–moz-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
    /* high resolution styles */
    I’m considering whether jQuery might be used just to detect available screen width, and make it simpler than all this guessing.

    Edit: Found some more pages about pixel ratios:

    If you use jQuery, that line could be useful:
    var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;


    More links:
    This was very helpful for me to visualize what’s going on.

    And then there’s Modernizr media queries:


    Thinking it over, first you’d want this in your head, probably before you import your css:

    meta name=”viewport” content=”width=device-width”

    And then could you test this? I would hope that it would catch any device with a pixel ratio greater than 1, and then with a width less than the iPAds.

    /* Catch anything higher than 1, and screen width less than iPad */
    @media (-webkit-min-device-pixel-ratio: 1.1),
    (-o-min-device-pixel-ratio: 2.1/2),
    (min–moz-device-pixel-ratio: 1.1),
    (min-device-pixel-ratio: 1.1)
    and (max-device-width : 767px) {


Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.