Responsive Design: Setting the Widths, and Background Color

So I was gonna do a post to say I needed to add a background color (white) to the parts with writing: post, sidebar header, then as soon as I did that I realized I needed to play with the margins and paddings, which need to be in % if I'm to do a responsive design, so what the heck I'm gonna start the responsive design thing right now with the width of the containers. Good place and time as any to start.

So yes after a couple of lines of code to make the backgrounds white to be able to read properly, I get this:



And then with some adjustments to the width and padding of the main containers (header, outer-wrapper, main and sidebar), I get this:



And it's already responsive!! I've also been coding my images inside my posts to be responsive for the long run. They are set at width 95% so they take up as much space as possible.

So here are the dets for the containers. As of right now, my outer wrapper is set to width 80%, my header width 96% with 2% paddings on each side (so total 100%), my main post area is 65% with 3% paddings on both sides and 1% margin on the right (for space between it and sidebar) (so total is 72%) and my sidebar is 21% with 3% paddings on each side and a 1% margin to the left (total 28%). Yes, I played around a lot with those #s to get what I wanted, and it might still change as I add the graphic elements and other features.

The thing to remember when you are setting these widths is that the % is based on the size of the PARENT container. outer-wrapper is inside the body (which is the entire window), header main and sidebar are inside outer-wrapper. Setting the widths of the header is easy because it takes up the entire width of the outer wrapper, but main and sidebar share the width, so their total width needs to fit inside the outer-wrapper. It's really quite easy once you get that concept down. And also remember that paddings and margins need to be counted towards the width. If it equals more than 100%, it won't look right. It won't be cut off but it won't look right.

If you're not sure what the difference between margin and padding is, check out this article from Blogger Buster. But quickly, margin is the space outside the container, and padding is the space inside the container.

You can try out the responsiveness by resizing the browser. Everything should adjust and fit as the screen gets smaller or bigger. Of course this is just the beginning for responsive design, the very base. I'll be adding media queries so that the layout changes as you get smaller, to better suit tablets and smartphones. I'm so excited for that!!