• 0
Sign in to follow this  
Followers 0

Padding - Content and Box Sections

Question

Posted · Report post

Hi.  I'm looking to remove as much white space as possible, between the bottom of the my content section (shown as "Service Descriptions") and the top of the box section.  Ultimately, I'd like to be able to target specific page IDs for this setting, but for now...I've just been trying to get it to work site-wide.  Maybe I've done all that I can do in terms of removing the white space here.?

 

You can see the site page here:  http://www.nationalrealtaxtracking.com/nrttwp/our-services/service-descriptions/

 

Here is my current, Custom CSS/Less.

 

.hentry .hentry-pad {
  padding-bottom: 0;
}
#boxes .content-pad {
    padding-top: 0px;
}
 
Thank you.
Ryan

Share this post


Link to post
Share on other sites

14 answers to this question

  • 0

Posted · Report post

Hi there,

 

The post class in the line of code you're looking allows you to target that post only, so you'd put that first then the class where the margin is appearing inside the editor, which is .post meta to set the margin to zero.

 

http://screencast.com/t/nhGcS3wAHuS

 

.post-86 .post-meta {margin-bottom:0;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

There's still quiet a bit of padding in there you could remove if you wanted to go further. If you're using firebug then scrolling through the html for the sections where you think additional padding is applied will show you padding/margins in yellow/dark blue. So then you can easily target where the space is coming from and remove.

 

I've screencasted going through your site and removing the extra bits so you can see this live - http://screencast.com/t/opCNyQSIsc6e

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Following your screencast...

 

At :08 and :09, those changes are undesirable, as it moves the logo.  I'm not sure if it matters for what comes next, but I did not make these changes.

 

For :33, this is what I added to Custom CSS 

 

.fullwidth #pagelines_content #column-wrap {
  max-height: none !important;
}
 
Within Firebug, clicking what you do at 1:10, does nothing on my screen.
 
I've still just as far along as I was before.  I'm not proficient at editing the Custom CSS, but I have been able to successfully change some things in other areas.  I've even been taking CSS "classes" in the meantime.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Was able to knock out a bunch of Custom CSS stuff today, but this one is still baffling me.  As soon as I attempt to remove white space (see an example below), I lose my titles on each page.  Then, the only way to get the page titles back, is to go into PageLines > Website Setup and click Save Options.  I tried clearing the browser cache and whatnot, but the only thing that works is the Save Options.  Weird.

 

#boxes .content-pad {
    padding-top: 0;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The best thing to do is use Google Chrome Dev tools, inspect the elements you wish to reduce and then locate any elements for that section that display green, green in Chrome dev tools means that element has padding. Then use that elements class to remove the padding. Also, Chrome displays margins as orange, so do the same thing for margins like I mentioned above for padding.

 

I just used:

 

#boxes .content-pad { padding-top:0; }

 

and no titles were removed.

 

You shouldn't use the ID of the section for example #boxes, use the sections class name for example .section-boxes instead. This is because, IDs in CSS overpower most things, so if you wanted to make future changes to the boxes section on a specific box set or boxes section on a particular page, you will run into trouble when ID is used.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, I'm down to the following (showing Orange in Google Dev Tools) and i could use a little help w/ the syntax to remove the padding/margin.

 

<article class="post-86 page type-page status-publish hentry fpost post-number-1" id="post-86">

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You. Are. My. Hero. : )

 

Thank you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're welcome, thanks for updating the thread, glad all's working.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

 

I have another puzzler, that I figured out once before...but sometime yesterday I accidentally removed the code from Custom CSS.

 

I had the white text, within these cards, vertically centered and now they're not.

 

http://www.nationalrealtaxtracking.com/nrttwp/our-services/services-by-industry/

 

This is what I thought would work:  .post-88 .front {vertical-align: middle;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Usually if I were changing that element I would edit the margin at the top to bring it down using a % value. Something like

 

.flashcard-container li > div > div {
    margin-top: 18%;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I had that set before, got excited...then I flipped the first card.  The margin setting causes the text on the back to go off the card.  Somewhere I set it "globally" so that that front and back text was centered...vertically.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Please be aware that we can not provide support styling third party plugins, you appear to be using a plugin called Flashcards.

 

To give you a helping hand, try changing the line-height from 125% to 130px and see if that works.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny. Just thought it would be quick find for the gurus and would have understood if this topic was just closed.

 

Pretty much the same result.  On the back of the card, the text centers, but get severely cut off.  Just bugs me cause I figured it out at one time.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yeah I see what you mean, for this you will need to contact the developer of the plugin for assistance. You could probably try reducing the font size, but contacting the author of the plugin would be best.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0