[Resolved] Can I do this with Element Blocks?

[Teresa]

I have this great new blog layout that was designed for me. Before I hand it off to a better dev than me (which is really pretty much any dev), can I do this with Element Blocks?

Link to image if it doesn’t load: https://www.dropbox.com/s/jz96baw0joet2pz/skyworkblog.png?dl=0

I’ve been getting pretty good at GenerateBlocks (here’s the staging site, not ready for primetime, but it’s not bad https://staging-skyworkult.temp513.kinsta.cloud/sky-work-features/) for nice cards and such, so if I could build a blog page with blocks instead of editing the archive template … I’d be into that.

Much appreciated.

[Teresa]

I figured it out! Inspired by another post, I used WP Show Posts and tweaking a lot of CSS. https://staging-skyworkult.temp513.kinsta.cloud/blog/ . Not perfect yet, but I’m happy with the progress.

[Elvin]

Hi Tris,

Nice work. So great to see you using WP Show Posts and finding ways with it.

To add to to your current setup, you may want to consider adding these css styles.

.wpsp-read-more {
margin-top: auto;
align-self: center;
}

.wp-show-posts-columns .wp-show-posts-inner {
flex-direction: column;
display: flex;
}

.wpsp-read-more a {
margin-left: 0;
}

Here’s how it’ll look like when you add these css styles.
https://share.getcloudapp.com/12uJze8A

You might also consider assigning a fixed height on the image and reducing the number of words displayed on excerpt so the card layout looks visually even.

Let us know if this helps. 🙂

[Teresa]

Thank you Elvin! I appreciate your help. Tris

[Elvin]

No problem. We’re always glad to help. You’re welcome.:)

[Teresa]

All the changes work fine … except the buttons. I don’t know what magic you did Elvin when you inspected the CSS … but even following along, align-self doesn’t center. What am I missing?

[Elvin]

I’ve reinspected your site and saw that display: flex; didn’t apply to the button’s parent element.
https://share.getcloudapp.com/yAubQgGZ

display:flex has to be applied to parent elements for align-self:center; margin-top:auto; to work.

You may have to force the class selector to use !important if its not applying.

.wp-show-posts-inner {
flex-direction: column;
display: flex !important;
}

You can try this css code. Let us know if this works for you.

[Author]

Posts