For my next application of responsive design, I wanted to take an existing site design that is using WordPress as the CMS and convert it to be responsive.

I designed a site a couple of months ago to market an MLM business. For the full rundown on that site, please see my blog post, Confession.

Since I designed the site from scratch, it was pretty easy to convert it.

• Click here to go to the Project Demo.
• Resize your browser window narrower until you see the changes.

So, what’s happening? As you resize the window on the desktop, a couple of things automatically resize and/or move so that it will look more natural in that size.

• Movement (triggered by resizing window to 960px or smaller)
  • Left sidebar, “Testimony”, moves above the content section
  • Right Sidebar, “Form, moves below the content section
• Resizing (triggered by resizing window to 600px or smaller)
  • The video element resizes from 519px wide to 280px wide
  • Copyright element’s padding resizes from 176px to 10px

Screenshots:

For the full css coding, take a look at the style.css attachment below.

Along the way, I also learned something in css that has been bothering me for a while now. I’ve recently become a fan of the “float” attribute. It allows block elements to align left or right of each other without having to use tables or other, more absolute, positioning methods. But my problem was when I wanted to float an element but then stop floating so that the next element would line up underneath the above floating items. After some research, I found this tag to be the problem solver: “clear: both;“. Simply place that tag and attribute in the element that should line up underneath the floating element(s) and it does the trick.

Attachment: style.css

|