Genesis 2.0 / HTML 5 – CSS tips please!

[jhguynn]

I'm using Executive Pro and discovered that I needed to modify the following CSS code to get my intended result:

.home-top { /* note: this is the child theme's original css code, before my edit */
background-color: #fff;
clear: both;
overflow: hidden;
padding: 60px 30px 0;
padding: 6rem 3rem 0;
}

I have some questions:

(1) why is padding articulated in terms of both both 'px' and 'rem'? And is rem always px times 10?
(2) I'm accustomed to expressing padding amounts as a quartet: top, right, bottom, left. When there are only 3 variables, what is the logic here? What about when only two digits are provided?
(3) Overflow: hidden ... what does this accomplish?

Thanks for the help!

[cdils]

Hi there,

Good questions.

1) As of Genesis 2.0, all font and other height/width dimensions are set in both pixels and rems (pixels are there for fallback support on browsers that might not support rem). And yes, the math is always px times 10. 🙂 In the case of fonts, you'll see this is your stylesheet as the baseline:

html {
	font-size: 62.5%; /* 10px browser default */
}

2) You're right about padding and margins (and borders and other elements the have TOP RIGHT BOTTOM LEFT) specs. You can shorthand CSS on these by specifying just TR (in which BL just inherits the others, respectively). In the case of TRB, it's assumed that L will pick up the same definition as R.

3) Overflow hidden is used in the event that a container's content "overflows" the space designated. If overflow is hidden it just means that you can bank on that container's size.

Those might be terrible explanations. Feel free to ask followup questions if I didn't explain it well.

Cheers,
Carrie

---

Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂

I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[jhguynn]

Carrie: Spectacular answers to my questions. Very helpful. Thanks!

[Gary Jones]

Alternative / further explanations:

1) It's not specifically "As of Genesis 2.0..." - the technique of using 62.5% base font size has been around for years - commonly to make setting font sizes in em's easier. While it makes the maths easier, there's some discussion about it, since it means having to set a font-size on elements where you'd previously let the browser default be used instead, meaning more code to maintain. rem (root em) units are newer, and instead of relating to the current font size inherited from the parent, it relates to the root element (html), so that nesting elements with 1.2em and then 1.5em doesn't end up with 1.8em etc. Since IE8 and below doesn't support rem units, a fallback of px is also given, for now. You could of course consider just putting the px fallback values into an ie-style.css and referencing that with conditional comments, to keep style.css cleaner.

2) There's also the shorthand with a single digit of course, where all values use the same value.
TRB = TRBR
TR = TRTR
T = TTTT

3) While Carries explanantion is correct, the pragmatic answer here is that it ensures the containing element does visually wrap around it's floated contents.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[cdils]

Gary - my comment about "As of Genesis 2.0" referred to the use of 62.5% base font size in Genesis themes, not the web in general. 🙂

Thanks for the added detail!

Cheers,
Carrie

---

Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂

I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[Author]

Posts