treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Responsive Website not working

  • I am a new web designer .I am working on my first responsive website with Media Query. When I test it on computer, and re-size the browser window, it works perfect , BUT when I test it on my Cellphone (Samsung Galaxy sII), I have not seen any changes at all . It looks like the same design as big screen!! That means Media query does not work at all for my website!! I am really confused and disappointed. I don’t know what the issue might be?!! Any small hint would be a great help for me. Here is the link : http://anadeveloper.com/nature/ Thank you very much

  • Include this in the head section and you should be fine:

    <meta name="viewport" content="width=device-width" />
    
  • Let me know if it works.

  • It's a good idea to add an initial-scale into that meta tag as well:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    Otherwise, the page gets stretched/squished when a device is rotated (at least on iOS).

  • a good thing to add is to start of with a boilerplate such as html5boilerplate or mobile html5boilerplate

    http://h5bp.com

  • Re: "posterity576" , Thank you so much . I just added that line of code , and it works PERFECT !!! You made my day :) Thanks again !

  • Thank you guys for all of your hints ! It was great and very helpful !