What am I missing about responsive web design?

Question

My concept of "Responsive Web Design" is:

• Design a web layout that stretches nicely with any width monitor or media screen.
• Design a web layout that squeezes too with any width monitor or media screen.
• Design a web layout that viewed nicely on any device.
• Design your layout with percentage (%) rather than pixels (px).

After the common concepts I owned some concepts, now at this point, I'm confused of:

• Design anything as your layout, scrolling your mouse-wheel see how it looks when stretches or squeezes in different media screen width. Just design anything, and then do CSS for different media screens/device widths. To do so, just use @media screen and (max-width: 800px) { /* do Media CSS here; */ }, and add your NEW CSS for any of the element of your layout.
  ^{(So, when you have power to do anything with the media queries, just design with ease. After completing design for computer monitor, put emphasis on the devices or small media screens and play with the CSS)}
  Suppose in style.css I specified width of header .somediv{ width: 100%; }, in 320px I can specify the width whatever I like to as @media screen and (max-width: 800px) { header .somediv{ width: 50%; } }.
• When something is popping out from the layout, just clear the float and put the thing in stack before or after the main container.
• Do responsive CSS for images with img{ max-width: 100%; }.

Now for my satisfaction and progress through the responsive world, I want you to criticize me - what am I wrong about responsive CSS if I'm thinking like the above?

Or, I'm completely OK with the concept, then why my site is breaking in 320px while not on 800px, and I can't apply different CSS for 320px solely. Why I have to specify header height in 800px where it's applicable only in 320px?

Answer 1

So it looks as though you are doing everything right, I can see issues with your site but only at say 640px but 320px looks fine for me.

When I first started responsive designs I found this website: http://css-tricks.com/

I opened up their CSS stylesheet and studied it and found out how they did it.

For reference sake I would advise looking at the following links on how to do responsive design:

• Simple Responsive Images with CSS backgrounds - SmashingMagazine Mobile
• Beginner's Guide to Responsive Web Design - TeamTreeHouse.com blog
• Responsive Web Design - Learn.ShayHowe.com
• Build Basic Responsive Site CSS - NetMagazine.com

With regards to getting the Media Queries I would strongly advise looking here:

• Media Queries for Standard Devices

There is people I know who still use php scripts to determine the users screen resolution and then load a specific CSS stylesheet which personally I would not recommend but that is also an option.

I personally would try changing your CSS to include the following:

    @media only screen 
    and (max-width : 320px) {

        #div1 {

            width:100%;

        }
    }

The only way I have managed to get this working though is by either copying my whole CSS over again for that specific media screen or by only specifying the certain div's to change.

Remember you can re-declare the CSS styling for a DIV or CLASS further down the stylesheet

Hope this can be of some help to you.