Tagged: Beaver Builder, bottom align
- This topic has 5 replies, 2 voices, and was last updated 11 months, 4 weeks ago by Sebastian.
Author | Posts |
---|---|
EVoK
October 6, 2023 at 4:14 pm
|
Hi, What is a good approach to this in Beaver Builder and Microthemer? |
Sebastian
October 8, 2023 at 11:57 am
|
Hey, Sorry for the slow reply, your message came through after hours on Friday here in the UK and I’ve just had a chance to get to my computer. In answer to your question, the following CSS selector and styles should align the items as you requested, if I’ve understood you correctly:
This works by targeting the container element for the title and the link/button row. Setting display: grid means we can use the grid alignment options. And setting align-content: space-between ensure that any left over space is inserted between the grid items (instead of after it), which pushes the link/button down to the bottom. I hope that helps. Please let me know if you require further assistance. Thanks, |
EVoK
October 10, 2023 at 12:41 am
|
No worries about the delay, Sebastian. Thanks for the solution. It worked for the most part. One column has a strange gap: Also, I used grid and justify start/end to align the text link (to the left) and round button (to the right), but it doesn’t work on that third column. Any thoughts on the best practice to achieve this? Initially, I tried with a class on the child columns but it didn’t work so I proceeded with targeting each unique child column. |
Sebastian
October 10, 2023 at 12:13 pm
|
Issues targeting all columns as a set might relate to CSS specificity. I had success modifying the selector I previously suggested a bit, in order to override a justify-content setting:
Above, I’ve added an extra class (.fl-col) for added specificity, and an extra property (justify-content: normal). justify-content was set to flex-start by Beaver Builder, which was causing the text to bunch up. I fixed this by setting it to normal. Hope that helps. Cheers, |
EVoK
October 12, 2023 at 2:20 pm
|
That’s very helpful. Thank you! |
Sebastian
October 12, 2023 at 6:52 pm
|
Great, happy to help! |