Imbalance 2 post alignment

• 

  orlandowoods · Member · Jul 22, 2013 at 9:32 am

  • Copy link
  • Add topic to favorites

  Hi all

  Two things I would like help with for the CSS for my site (orlandowoods.com):

  1. Reduce the white space between the tab for my “contact” page, and the top row of posts

  2. Evenly align (horizontally) my second (and subsequent) rows of posts – at the moment they’re all slightly higher or lower than each other, depending on post length

  Thanks in advance for any help!

  Orlando

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

• 

  thesacredpath · Member · Jul 22, 2013 at 6:54 pm

  • Copy link

  Orlando,

  1. The white space is due to a 170px minimum height set in #branding to accommodate a header image if you choose to use one. Add the following to your CSS and and adjust as desired (I’ve used 70 as an example). If you decide to use a custom header at a later time, then you would have to readjust the #branding minimum height as needed for the header image.

  #branding {
  min-height: 70px;
  }

  2. Imbalance 2 uses masonry javascript for the post grid so that it can find the best fit for the posts, and the best order, no matter what length they are. You can see this more clearly on the Imbalance 2 demo page. Take a look at this graphical explanation of how masonry works (see under “After: Masonry”).

  You can use a custom excerpt for each and every post and make sure they are exactly the same length, but this would be time consuming.

• 

  orlandowoods · Member · Jul 23, 2013 at 2:08 am

  • Copy link

  Thank you very much!

• 

  thesacredpath · Member · Jul 23, 2013 at 5:05 pm

  • Copy link

  You are very welcome Orlando.