Forums

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

Home Forums CSS Responsive Design won’t work on my phone!

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #42914
    NoizyCr1cket
    Participant

    Hi. I’m trying to make my website responsive, and as you can see [here](http://www.gchiller.com/test/index(WIP).html “G Chiller Test Site”), the responsive part works perfectly (except for the footer, I’m working on it) on a desktop. For some unknown reason, however, when I go to the site on my phone (Samsung Galaxy S3 with Firefox), it displays it as if the site was on a desktop. I’m using CSS media queries with pixel widths to (try to) make the website responsive. Obviously this isn’t working and I don’t know if it’s because of the way I’m doing it or for some other reason, but can someone please help me?

    #125628
    sloveland
    Participant

    Try injecting this in your head block;

    #125629
    sloveland
    Participant

    Wow, sorry having code-posting issues. Here’s a pen with the code I’m talking about.

    http://codepen.io/sloveland/pen/zmnou

    #125632
    NoizyCr1cket
    Participant

    @sloveland: Thanks for the quick reply! I tried that code and it’s working…somewhat. Everything is a bit too big on my phone’s screen, but that’s probably just a quick css fix. Thanks for the help!


    @posterity576
    : Thanks also for the reply. I’m using sloveland’s code and it’s working.

    #125633
    sloveland
    Participant

    @posterity576 hey no problem!


    @NoizyCr1cket
    glad we could help. =)

    Just as a little background, I believe the width=device-width helps tell the mobile browser that it doesn’t need to zoom all the way out to get the “helicopter view”; in a sense letting it know that you’ve made it responsive.

    The initial-scale=1 is for retina screens (newer iphones and ipads), telling the browser to render the page at normal resolution instead of trying to double up pixels.

    At least that’s what I think it is, after reading articles. More here.
    https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

    And good job learning responsive. =)

    #125635
    NoizyCr1cket
    Participant

    @sloveland Ok. Thanks for the link.

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