Genesis – Less White Padding on Top/Bottom Post Teases on Homepage and Widgets

[eevdo]

Hi guys,

I am looking to reduce the top and bottom white padding on each post teaser located on my homepage: http://bit.ly/18VG5dq

For the widget area I am looking to put less white padding on the top and bottom of each sidebar widget.

Thanks!

http://bit.ly/18VG5dq

[nutsandbolts]

For the post entries, find this in your stylesheet:

.entry {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
padding: 40px 40px 24px;
padding: 4rem 4rem 2.4rem;
}

Those last two lines of padding are what affects the white space (the first number is the top padding and it goes clockwise). You need to keep both px and rem values equivalent (10px = 1rem).

As for the widget areas, find this:

.sidebar .widget {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
padding: 40px;
padding: 4rem;
}

Same thing - it's the two lines with padding and the values need to be equivalent. When there is only one number listed, it applies to all four sides.

Hope that helps!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[eevdo]

That worked perfectly!
Thank you very much.

How about if I want to change the spacing between widgets and entries?

[nutsandbolts]

Can you point me to an example on the site?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[eevdo]

If you visit the website: http://bit.ly/18VG5dq

You will see that in between each of the posts on the homepage as well as the sidebar widgets there is a grey space.
I would like to reduce the space as to make the content closer together.

Thank you.

[nutsandbolts]

For the posts, find this:

.entry {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
padding: 40px 40px 24px;
padding: 4rem 4rem 2.4rem;
}

and change to this to eliminate the gray completely:

.entry {
background-color: #fff;
border-radius: 3px;
padding: 40px 40px 24px;
padding: 4rem 4rem 2.4rem;
}

To do the same for the sidebar, find this:

.sidebar .widget {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
padding: 40px;
padding: 4rem;
}

and change to this:

.sidebar .widget {
background-color: #fff;
border-radius: 3px;
padding: 40px;
padding: 4rem;
}

If you use a tool like Firebug or Chrome's Inspector, it's easy to find the rules in your stylesheet that apply to different areas of the site. You can test changes before going into the stylesheet to make sure they will do what you want.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[eevdo]

Awesome. Worked perfectly.
Thanks.

[Author]

Posts