divider equal height - Forum | JoomShaper
Staff replied SP Page Builder

divider equal height

Asked by cinzia 8 months ago Last activity 8 months ago

Hi, I hope you can help me. I am using SP Page Builder Pro 6.2.3 in a Cassiopeia template.

I added some text addons on the same row, separated by dividers, but when I view them, the dividers do not have the same height as the text addons. I know I can set a height for the addons, but I would prefer not to set a specific height since they might not display correctly depending on the screen size.

Similarly, the text addons do not all have the same number of characters, so they also do not have the same height.

Therefore, I wanted to understand if there is a setting to automatically make the addons in the same row have the same height so that they adapt automatically to the screen size, without setting fixed heights or padding.

Thank you.

1 reply

Mehtaz Afsana Borsha Staff
8 months ago

Hi,

Thank you for reaching out and for the detailed explanation — it helps a lot.

At the moment, SP Page Builder does not have a built-in setting to automatically equalize the height of addons within the same row based on the tallest content. Each addon’s height is determined by its own content, which is why text addons with different amounts of text — and dividers between them — can appear with uneven heights.

You’re correct that setting a fixed height is not ideal, as it can cause layout issues across different screen sizes. Unfortunately, SP Page Builder currently does not offer a responsive “equal height columns/addons” option that dynamically adapts without fixed values.

Possible workarounds include:

  • Using custom CSS (e.g., Flexbox with align-items: stretch) applied to the row or columns.

  • Structuring the content so that dividers are part of the column background rather than separate divider addons.

  • Keeping content length consistent across text addons where possible.

I understand this limitation can be inconvenient, especially for responsive layouts. I’ll share this feedback with our development team as a feature request for future improvements.

Please let me know if you’d like help implementing a CSS-based workaround.

Thank you for your understanding.

-Regards.

Log in to reply.