Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Reduce The Spacing Between Feature And Morefoot Sidebars


Question

Posted · Report post

Hello Everyone,

I am trying to reduce the space between the Feature section and the Morefoot sidebars. If you go to the following link you will see what i am talking about as there is too much white space. http://50ccplus.com/

Thank you

Dave Gosine

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

theTimHunter, were did you find this code as it solved the problem. did have to change -50px to -75px.

.pprow {margin-top:-50px!Important;}

Just used Chrome Inspect Element to find the main container. If you are unsure, just try some stuff and if it messes things up, delete it.

Share this post


Link to post
Share on other sites

Posted · Report post

You’ll need to use Custom CSS (in Site Options > Custom Code > Custom CSS). CSS that changes the style of a page element consists of two parts: the selector and the attribute.

Selector: Used to select the page element you want to change (in this case, the page element you want to change is the bottom padding of the feature slider area).

Attribute: Property that determines what kind of change you want (you’re changing the bottom padding, so the attribute you want to use is padding-bottom).

To find the selector for the feature slider area, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please read and follow these instructions: http://www.pagelines.com/wiki/Custom_CSS.

For help with the padding-bottom attribute, please see these instructions: http://www.w3schools.com/cssref/pr_padding-bottom.asp

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Try this:


.pprow {margin-top:-50px!Important;}

Then just adjust the -50 number until you get what you want.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Or try this:


.content .content-pad {

    padding: 0 15px 15px;

}

#site #page, #site #dynamic-content {

    min-height: 300px;

}

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hello Guys,

First Thank you all for your help.

Rob, I started editing the site in the beginning with this code, but found that it would not change anything under 300px. Hence the gap was still to big.

#site #page, #site #dynamic-content {

min-height: 300px;

}

Added this as you suggested but had to make a change from this 0 15px 15px; to 15px 15px 15px; as the top gap was gone.

.content .content-pad {

padding: 0 15px 15px;

}

theTimHunter, were did you find this code as it solved the problem. did have to change -50px to -75px.

.pprow {margin-top:-50px!Important;}

Catrina, thank you for teaching how to look for the problem and solve it.

Share this post


Link to post
Share on other sites

Posted · Report post

We're glad this worked for you, we'll close this thread now for moderation purposes

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites