Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Vertical alignment of columns

Featured Lock Resolved Issue
Hello

Searched the forum but couldnt find a topic on this. Is there a way to vertically align columns or Add-ons in page builder? By default, the column content is centered, but would like to see if I can get the column content to vertically align with each other. Thanks

7 Answers

Pavel

More than a month ago #Permalink
If I understand the question correctly, the discussion went the wrong way.
The vertical-align property is only used for inline elements or table cells. Columns in SP PB are block bootstrap elements and you can not apply the vertical-align property to them.

By default, the content inside the columns is aligned to the top. The columns are always of the same height, regardless of the content in them. The height is determined by the larger content.
http://dl4.joxi.net/drive/2018/08/24/0008/0401/545169/69/4b2925f6e8.png
If you want to align the columns and addons, that are inside the columns, vertically, you should click the middle align button in the section settings.
http://dl3.joxi.net/drive/2018/08/24/0008/0401/545169/69/d996397617.png
In order to align the blocks like that on another, you should perform the following actions:
Add a class or ID to the section.
http://dl4.joxi.net/drive/2018/08/24/0008/0401/545169/69/d43f75060d.png
Find the container with the code inspector, which centers the blocks in the middle, disable the original align-items property,
http://dl4.joxi.net/drive/2018/08/24/0008/0401/545169/69/38cbcae36d.png
copy its selector and add it after your class. Then you can use the align-items property and use one of its possible values.
http://dl3.joxi.net/drive/2018/08/24/0008/0401/545169/69/322188f254.png
The final code from my example looks like this:

.myClassSection .sppb-align-center {
align-items: end !important;
}

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
maybe you have to use: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
for selected class

Mike Lawson

More than a month ago #Permalink
Paul

I think this is the right path, but I havent been able to find the right snippet. This is what I tried in custom CSS


#sppb-column {
vertical-align: text-top !important;
}


Doesnt work, any alternatives? Thanks

Paul Frankowski - Staff

More than a month ago #Permalink
You have to talk with Front-end developer.
---
Sorry, I made mistake, The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box ONLY, not columns blocks.

Read about: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Mike Lawson

More than a month ago #Permalink
Pavel & Frank

Thanks for your input, very helpful (and yes, it worked). Im sure this thread will come in handy for others as well.

Paul Frankowski - Staff

More than a month ago #Permalink
I asked to add this option into row/columns settings - it should be easy to implement.

Thanks.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 103
Sifat

Sifat

Total Accepted Answers: 95
Toufiq

Toufiq

Total Accepted Answers: 36
Pavel

Pavel

Total Accepted Answers: 4
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us