How to change the CSS for a theme that is not full-width?

[Rosa Bosma]

I'm working on a Genesis child theme that is not full-width, but now I'm getting in trouble with the alignment of widgets. I don't know what to do with the CSS to repair the structure of the site, in other words: to align elements properly (and responsively). The original CSS only suits full-width content.

What I'm dealing with right now are the footer widgets. It's clear that I should change something in the margin and / or float properties. But even though I calculated 300px per footer widget and four times a 25px margin space (in a 1000px wrap), and changed the CSS accordingly, it still looks disordered, even more so in my smartphone.

Is it because 'float: left' and 'margin-left' contradict each other? There are still things about CSS I need to learn... 😉

Here you can see the theme (which is far from finished!) that I'm talking about: http://test.rosabosma.com.

I would really appreciate suggestions. 🙂 Thank you for the attention!

http://test.rosabosma.com

[marybaum]

float: left and margin:left don't contradict each other. But generally when you float left, you want to add margin to the right, because you're floating your element to the left, and the content is filling the space to the right. Adding margin to the left will push the floated element out from the left side of whatever div it's sitting in.

A resource I absolutely love is Chris Coyier's CSS-Tricks. There's also a podcast called the ShopTalk Show, where Chris and Dave Rupert, another talented dev, and usually a guest, answer questions people have submitted about all sorts of things in the front-end world. As a result, I haven't heard a car-dealer's radio commercial in two years. 😉

If you look at the CSS in the Genesis theme itself, or in the Genesis Sample theme, you'll see the basic structure for a layout with columns is already there, in pixels. Often the first thing I do is change the horizontal units in the Sample theme (not EVAR the framework itself) to percentages.

So in the case of your three footer widgets, instead of thinking of them as 300px wide, each, think of them as 30% wide, with margin-right of 2%, except for the one on the absolute right, which won't have any margin at all. When you're dealing with multiple elements in a horizontal row, give yourself a little wiggle room by making sure the sum of the widths, margins, borders and padding don't quite add up to 100%. That way you won't have the element on the right fall down out of the row - which will definitely happen if everything adds up to more than 100%.

I've found that using percentages alone, instead of using pixels, will get you a lot of the way towards the fluid layout you want as the basis of a responsive design. Then the rest is just tweaking, which is fun (to me, anyway.)

Hope this helps!

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[Rosa Bosma]

Thank you very much! Your comprehensive explanation was really helpful and provided me with new insights. 🙂 It's all a lot clearer now. Also, I had not considered using percentages yet. Doing that makes sense, now that I think about it.

[Author]

Posts