Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis – Less White Padding on Top/Bottom Post Teases on Homepage and Widgets
- This topic has 6 replies, 2 voices, and was last updated 11 years ago by
eevdo.
-
AuthorPosts
-
January 2, 2014 at 2:46 pm #82747
eevdo
MemberHi 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/18VG5dqJanuary 4, 2014 at 8:56 pm #83319nutsandbolts
MemberFor 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+January 19, 2014 at 10:59 pm #86027eevdo
MemberThat worked perfectly!
Thank you very much.How about if I want to change the spacing between widgets and entries?
January 19, 2014 at 11:00 pm #86028nutsandbolts
MemberCan 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+January 20, 2014 at 10:41 am #86116eevdo
MemberIf 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.
January 20, 2014 at 12:08 pm #86127nutsandbolts
MemberFor 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+January 26, 2014 at 9:35 pm #87176eevdo
MemberAwesome. Worked perfectly.
Thanks. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.