In class today, we were assigned a few basic responsive CodePens to make playing around with different meida queries and seeing how we can make content reflow. If you want to see them at work, you’ll have to “edit on CodePen”. Check em out!

Here is a basic one-breakpoint layout, where global is 200px width and 50% after breakpoint:

See the Pen RWD one by Dawn Delatte (@dawndelatte) on CodePen.

This is a two-breakpoint layout with a third div, making them 33% at the second breakpoint:

See the Pen RWD two by Dawn Delatte (@dawndelatte) on CodePen.

And this one is three breakpoints, with all three divs:

See the Pen RWD three by Dawn Delatte (@dawndelatte) on CodePen.

Lastly, a “wrapper” that scales with the page and has a max-width of 1000px:

See the Pen RWD wrapper by Dawn Delatte (@dawndelatte) on CodePen.

Looks like plain ole’ primary color boxes I know.. but for me learning RWD is a whole new great big world. I’m looking foward to diving in and becoming a responsible-responsive-designer.