Adaptive & Responsive Design with CSS3 Media Queries

Posted by on Aug 19, 2011 in Blog | 20 comments

Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs [...]

Advertise here with BSA

View full post on Web Designer Wall – Design Trends and Tutorials

Incoming search terms:


  1. I have to thank you again for this! It’s changed my whole approach to designing websites. SALUTE!

  2. please, is it possible to use a flexible slideshow (some kind of script), instead of flexible images? it would be so nice of you to help me. thank you.

  3. Wow! This is simply great and Excellent resource. This article helps me understand a lot of things around mobile web. Thank you! :)

  4. Video still seems to be super unreliable. When trying out both iframe and object, there are issues in addressing height in my project.

  5. This is really an amazing technique.. I’m going to try to adapt it to my website

  6. Very Great article!
    It is very help full for my next webdesign project.
    Thank you

  7. Great article, I found this one for keeping your design of a mobile site simple.

  8. Really very useful article. Some great information when considering all platforms – thanks again!

  9. “I love your blog. I really like the “wall graphics”. I also have a “wall graphics” support website at”

  10. Hi I have a question. I’m playing around with the this demo and when i open the page on an ipad landscape it’s fine – rotate to portrait it’s fine but when I rotate back to landscape it goes back to full size? Is this an iPad thing or a media queries thing and what’s the fix?

    Thanks and this is an awesome demo!

  11. It is helpful article for my personal projecst. thanks a lot.

  12. This is simply great! It’s not easy but you made it pretty clear how to work every case in particular. Never seen any post like this one being so clear about adaptive structures… thanks for shearing this, I’m going to take the time to work with this and for sure share my results =) Thanks once again

  13. Thank you very much! This article helps me understand a lot of things around mobile web. Thank you! :)

  14. Nice tutorial, thanks :)
    I checked out the demo with Firefox on my PC and on my Nokia E63 with default S60 browser, Opera mini/Opera mobile. Nokia’s default browser shows unscaled full page as on desktop, Opera mini showed scaled version but page is little wider than phone’s screen and Opera Mobile shows the page properly scaled.

    So do the trick in most device browsers.

    How to make page compatible with those mobile browsers which doesn’t support media query like Nokia’s default browser?

  15. Great article and demo. Only problem is, and I’m not positive on this, the iPhone initial-scale=1.0 line locks that in, true. But it also locks it in only on the initial view mode you start viewing the build in. ie – if you open this page on your iPhone in portrait mode, looks great. But flip over to landscape mode and nothing scales properly. The page is too wide, and elements scale up making them too large.

    Great starting point though.

  16. Idk, i think mobile design is all over the place.

  17. forgive my ignorance, but what is the significance of the 650px width? i know its one-column, but it seems a bit arbitrary.

  18. certianly takes a bit to understand the mobile sides of things, might have to read again :) Nice writeup tho

  19. I’m not gonna kid you. This info on mobile website design is gonna take some time to absorb. But thanks for posting it and explaining in detail.

    Your willingness and patience in sharing your knowledge is quite refreshing.

  20. awesome article thanks for the post..i was surfing for this thanks for giving me such great stuff