[Resolved] CSS alignment question for masonry

[Davinder Sangha]

Using GeneratePress with some custom CSS, but struggling to align masonry blocks on various category pages.

http://www.workwearexpress.com/downloads/Capture.JPG

Link shows the block which I need aligning. It’s the same on the other categories.

[Tom]

This looks like it’s happening because the “Ugg” post is too long, causing it to push down the post below it.

[Davinder Sangha]

Hi. That’s correct. How do I clip that text/element/block so that it lines up on every occasions, even with up-to-date articles.

[Tom]

Hmm, I’m not sure it’s possible to set it so it always matches the height of the item to the left, especially with new articles. You can target that specific post with CSS and try to tweak some things (padding/font sizes etc..) but it won’t be perfect.

I’ll keep thinking about a solution and will post back here if I think of one.

[Davinder Sangha]

Cheers. Our stories will be updated all the time, so I want to try and avoid any individual story CSS work. I’ll keep having a look as well and will update if I find anything.

PS. Blog URL is:

http://www.workwearexpress.com/blog/

[Tom]

You could use CSS to match the height right now, but it will change depending on the height of the post image and content as you update.

For example, this code should work right now:

@media screen and (min-width: 769px) {
      .masonry-container .type-post:nth-of-type(2) {
            max-height: 490px;
            overflow: hidden;
      }
}

However, when you add new posts, this CSS will most likely have to change.

[Author]

Posts