Close Gap Between Entry And Sidebar

[Porter]

I have a blank space between my entry and my sidebar, which is desired. I'm wondering what the proper way to close the gap between the two is. I simply want it to be the same size as the gap between my navigation and my entry (vertical).

I'm using the Genesis Sample theme as my foundation, so all code is the same as seen there. I tried adding:

.site-inner {
	clear: both;
	padding-top: 40px;
	padding-top: 2.4rem;
	padding-left: 2.4rem; //* Added this
}

That closed the gap, but I'm quite new to css, and I'd prefer to do these edits as proper as possible, and learn something along the way. Also, if anyone could explain the relationship between px and rem (when is rem used, should I have both px and rem, etc), that would be excellent.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

http://foundingfathersbar.com/

[Lauren @ OnceCoupled]

.site-inner contains .content and .sidebar, so adding padding to it is going to throw off your design. Instead, since these are floated left and right respectively, to bring them closer to together we need to increase one of their widths. We know the spacing in the sample theme is 40px, so if we want to decrease that to 24px we need to add 16px somewhere. For example, we could change .sidebar-primary from width: 360px to width: 376px.

(Also, when specifying rem dimensions, you want to have a fall-back px for browsers that can't handle the rem. And likewise when you change a dimension in rem, do the same in px. So for .site-inner you should have padding-top: 24px.)

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Porter]

Excellent response, thanks a lot!

While it's probably obvious, I'm awake way too early to think too deeply and must ask - what is the value relationship between rem and px? 1rem = 10px?

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Lauren @ OnceCoupled]

It depends on your root element. To make everything easy, we use body { font-size:62.5%; } to create the relationship 1rem = 10px.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts