Change distance between

• 

  ppstaking · Member · Jul 27, 2017 at 11:12 am

  • Copy link
  • Add topic to favorites

  On the front page: https://ppstaking.com/
  Iid like to change the distance inbetween <div class=”entry-summary”>
  Professional poker staking – Apply for staking
  and
  Apply for staking – Rakeback.

  The gaps are too big.

  What CSS code can I use in the editor to achieve this?

  The blog I need help with is: (visible only to logged in users)

• 

  ppstaking · Member · Jul 27, 2017 at 3:27 pm

  • Copy link

  margin-bottom: 5.25em;

  did the job

• 

  ppstaking · Member · Jul 27, 2017 at 7:20 pm

  • Copy link

  That failed in hindsight.

  I used the following code in attempt to decrease the space between the article posts on the front page, but it has resulted in the footer being move d up and overwritten in both of those article pages https://ppstaking.com/2010/03/23/professional-poker-staking/ and at https://ppstaking.com/2009/02/23/apply-for-staking/

  article#post-178 {
  	position: relative;
  	margin-bottom: -7.5em;
  }

  article#post-194 {
  	position: relative;
  	margin-bottom: -7.5em;
  }

• 

  thesacredpath · Member · Jul 27, 2017 at 7:42 pm

  • Copy link

  Hi there, each of the articles has a top and bottom padding. To tighten up the space in between, it would be best to adjust the bottom padding so it doesn’t affect the space above the first post. I’ve also noticed that the padding is set to a larger amount in a Media Query for window widths 784px and wider. What I’ve done is to look at the existing CSS with my web inspector and in the opening body html tag is a long list of CSS class, one of those being “blog”, so I’m using that along with the hentry CSS class that is in the article html tags to target just the blog page with this change.

  First off, remove these two CSS rules from your custom CSS.

  article#post-178 {
   position:relative;
   margin-bottom:-7.5em;
  }
  article#post-194 {
   position:relative;
   margin-bottom:-7.5em
  }

  Next add the following to your custom CSS and you can adjust the bottom padding as desired. It was originally 6em. You will notice there are two rules in this Media Query. The first sets the bottom padding between posts to 0, but it would also affect the very last post, making it very close to the footer widget area, so the second rule sets the bottom padding on the bottom post to 3em so it isn’t too close.

  @media screen and (min-width: 784px) {
    .blog .hentry {
      padding-bottom: 0;
    }
    .blog .hentry:last-of-type {
      padding-bottom: 3em;
    }
  }

• 

  ppstaking · Member · Jul 27, 2017 at 8:07 pm

  • Copy link

  Success. Thank you.
  I don’t find the code intuitive, but hopefully i’ll never need to do this again. :)

• 

  thesacredpath · Member · Jul 27, 2017 at 8:45 pm

  • Copy link

  You are welcome. It just takes time and some experience with CSS for it all to start making sense.