Support » Plugin: Gutenberg » Column equal height

  • Resolved Johan WALTER

    (@johan_walter)


    Hi

    I do not find an option in block “Column” to have equal height.
    Since request does not seem to have been posted neither.

    Can you please help to find a way to have column equal height on a row ?
    Any chance this feature could be added in future update ?

    Thanks

    Regards

    Johan

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    Hi @johan_walter

    I activated the Gutenberg plugin.
    Went to a page. Added in the Columns block containing 3 columns. Added some text into each of them. Clicked into each. Looked at the breadcrumbs on the bottom and clicked Column. Then in the sidebar added a background color to each column. By default the columns should be equal height.

    Let me know if I am on or off track.

    Have a great day!

    Thread Starter Johan WALTER

    (@johan_walter)

    Hi @paaljoachim

    Can you try to have content in each column with content not equal, for eamlpe if you add some texte on 4 lines in one column, 3 lines in an other and 2 in an other, column will not be equal height
    Example https://ibb.co/hmmTWQr
    I use getwid and include section in column
    Is getwid related ?

    Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    Ahh.

    Are you using a Getwid columns feature? When the top most container of Columns is selected it should say in the sidebar settings if it is a Getwid block or not.

    Try the standard Gutenberg Columns block (in the Design section of the Block Inserter panel) and see if it is different.

    As I added much text to the first column and almost no text to the other columns and they all had the same height.

    Thread Starter Johan WALTER

    (@johan_walter)

    I use Gutenberg columns
    I insert Getwid section in column to be able to manage padding inside column and background color
    Here’s list of blocks on one row https://ibb.co/W0c6Ffh

    I tried to do it only with gutenberg using colunm and group but I was not able to have what I want
    Here’s what it looks like https://ibb.co/ThphxcK
    – I place background color in group, I don’t see any option in column to have a background column in order to have a space between 2 columns (not a full background color)
    – Group does not enable to manage padding (reduce space around image)
    If you have tips to solve this it would be welcome

    Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    Hi @johan_walter

    I am using a default theme: Twenty Twenty One.

    Using only default Gutenberg blocks.
    Added a Column block – 3 columns.
    Image block added.
    Paragraph block added.
    Light brown background color to each single column area. (Not top/parent Columns but Column. Check the breadcrumbs on the bottom. Be sure you are in the Column block.)
    Padding 10 px to each single column area.

    Here is a link to a screenshot I added to my Dropbox: https://www.dropbox.com/s/7gn0lkoubmojjc0/Column-block-3-columns-bg-color-padding.png?dl=0

    Try the above in your theme. Use only default Gutenberg blocks.
    Let me know how that works. If for whatever reason is still not working then I will create a video tutorial showing how it works.

    Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    Hey @johan_walter

    I happen to notice this PR:
    Columns: Update columns to allow full height stretch when vertically aligned
    https://github.com/WordPress/gutenberg/pull/32909

    Not sure why it worked for me, but the above PR should fix the problem you noticed.

    Thread Starter Johan WALTER

    (@johan_walter)

    Hi @paaljoachim

    I have done different testing with different theme, the way column behaves seem to also depend on theme so it might have worked for you because you use a default theme.
    Needs to be tested also for smartphone, columns are sticl togethere on smartphone, there is no space between 2 columns which are stack on each other

    To set background color on column individually I had to use customm css, there is no option to set color on individual column
    SCreenshot https://ibb.co/FsYqTH3
    it is only on columns
    Screenshot https://ibb.co/RpLPZmv
    I have last version of WP (5.7.2)

    Thanks

    Regards

    Johan

    Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    Hi @johan_walter

    Ahhh. It looks like a feature that is in the Gutenberg plugin. Not in WordPress 5.7 without using the Gutenberg plugin. I just tested with the beta version of WordPress 5.8 and there one can add background color to Columns. To test it out install and activate the Beta tester plugin and select I believe nightlies in the beta plugin setting screen.
    Or just skip it and wait until WordPress 5.8 is released at the end of July.
    I did not test stacking on smartphone.

    This also means to get this feature right now you need to use the Gutenberg plugin.

    Thread Starter Johan WALTER

    (@johan_walter)

    Hi @paaljoachim

    I thought Gutenberg plugin was integrated in WP core …..
    Nice feature to have choice of color per column
    I will wait WP 5.8

    Thanks for your help

    Regards

    Johan

    Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    WP core has a specific Gutenberg plugin version integrated. If one wants the newest features than one needs to use the newest plugin. WP core is usually a few steps behind the plugin version.

    Here are more details: https://developer.wordpress.org/block-editor/contributors/versions-in-wordpress/

    Plugin Support Paal Joachim Romdahl

    (@paaljoachim)

    Btw I will click the “Reply and mark as resolved” checkmark below..:)

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.