Jump to content


Photo
- - - - -

Padding - Content and Box Sections


Best Answer James B , 28 January 2014 - 02:38 AM

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;}

Go to the full post


  • Please log in to reply
14 replies to this topic

#1 rlogan

rlogan

    Super Member

  • Members

  • 133 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 23 January 2014 - 08:26 PM

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:  

Please Login or Register to see this Hidden Content

 

Here is my current, Custom CSS/Less.

 

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


#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 January 2014 - 07:08 AM

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 -

Please Login or Register to see this Hidden Content



#3 rlogan

rlogan

    Super Member

  • Members

  • 133 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 25 January 2014 - 08:41 PM

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.


#4 rlogan

rlogan

    Super Member

  • Members

  • 133 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 26 January 2014 - 10:06 PM

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;
}


#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 January 2014 - 09:54 AM

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.



#6 rlogan

rlogan

    Super Member

  • Members

  • 133 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 27 January 2014 - 05:45 PM

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">



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 28 January 2014 - 02:38 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content

 

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



#8 rlogan

rlogan

    Super Member

  • Members

  • 133 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 29 January 2014 - 09:07 PM

You. Are. My. Hero. : )

 

Thank you.



#9 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 29 January 2014 - 11:29 PM

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



#10 rlogan

rlogan

    Super Member

  • Members

  • 133 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 30 January 2014 - 03:58 AM

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.

 

Please Login or Register to see this Hidden Content

 

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



#11 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 January 2014 - 08:41 AM

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%;
}


#12 rlogan

rlogan

    Super Member

  • Members

  • 133 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 30 January 2014 - 01:40 PM

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.



#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 January 2014 - 01:54 PM

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.



#14 rlogan

rlogan

    Super Member

  • Members

  • 133 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 30 January 2014 - 09:31 PM

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.



#15 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 February 2014 - 04:33 PM

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.