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

Community Forums Forums Design Tips and Tricks Genesis – Less White Padding on Top/Bottom Post Teases on Homepage and Widgets

This topic is: resolved

This topic contains 6 replies, has 2 voices, and was last updated by  eevdo 7 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #82747

    eevdo
    Member
    Post count: 22

    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
    #83319

    nutsandbolts
    Moderator
    Post count: 3128

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #86027

    eevdo
    Member
    Post count: 22

    That worked perfectly!
    Thank you very much.

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

    #86028

    nutsandbolts
    Moderator
    Post count: 3128

    Can you point me to an example on the site?


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

    #86116

    eevdo
    Member
    Post count: 22

    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.

    #86127

    nutsandbolts
    Moderator
    Post count: 3128

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #87176

    eevdo
    Member
    Post count: 22

    Awesome. Worked perfectly.
    Thanks.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.