Cut the white spaces

[G.Ashwinkumar]

1)My site is http://www.booktips.in which is running on the Magazine Pro Theme. When you visit my site you'll be able to see that below the header there is section showing where you are currently on the site like example Home » Straight Lines And Curves I find that above it there is a lot of white space above it and below that divider. So i want to know how to cut these spaces.
2) I also want to cut the white space above and below the header i.e above and below the Booktips title.

These white spaces just make my main content get down in the page and a user has to scroll down to see the main content, also i think they don't look good.

So how do i remove the spaces.

http://www.booktips.in

[rfmeier]

G,

The white space above your bread crumbs can be adjusted within your style.css file. Here is an example;

/* style.css line ~419 */
.site-inner {
    clear: both;
    padding-top: 40px; /* reduce this value to maybe 10px */ 
}

To adjust the white-space above and below your header, you will also have to adjust your style.css file.

/* style.css line ~929 */
.site-header .wrap {
    border-bottom: 2px solid #222;
    padding: 30px 0 /* reduce the 30px to your liking */
}

I hope this helps or gets your started.

---

Ryan Meier – Twitter

[G.Ashwinkumar]

Thanks for your suggestions rfmeier It did work. I have now changed it and now its looking better! I would also love if you could help me reduce the size of the menu. It is just too broad i would like to reduce it to a better width i.e reduce the size.
And also when you visit my site you'll find that the left and the right side are blank can you suggest me any idea to put it into better use? Can i add like a fixed menu bar even in that white space and in the right white space add some social icons with some ads? Any suggestions and how to do it?

[rfmeier]

G,

I would also love if you could help me reduce the size of the menu. It is just too broad i would like to reduce it to a better width i.e reduce the size.

To adjust the width of the menu, you can do two things;

1. Adjust the padding on the anchor elements

/* style.css line ~1018 */
.genesis-nav-menu a {
    border: none;
    color: #222;
    display: block;
    padding: 25px 20px; /* adjust the second value for left and right padding */
    position: relative
}

2. Reduce the font size of the anchor elements;

/* style.css line ~1018 */
.genesis-nav-menu a {
    border: none;
    color: #222;
    display: block;
    padding: 25px 20px;
    font-size: 14px; /* adjust the font size */
    position: relative
}

And also when you visit my site you’ll find that the left and the right side are blank can you suggest me any idea to put it into better use? Can i add like a fixed menu bar even in that white space and in the right white space add some social icons with some ads? Any suggestions and how to do it?

I will leave that up to a designer. I am the last person who should be giving out design advice. You may want to make a new thread in the Design Tips section

Good luck.

---

Ryan Meier – Twitter

[G.Ashwinkumar]

rfmeier

I'm extremely sorry i'll soon try your suggestion quite busy. And ok i'll make a new thread in the design thread !

[Author]

Posts