[Resolved] Equal height columns

Home Forums Support Equal height columns

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1307780
    Chris

    I’m entering products in a column block and would like the columns all the same height.

    Because the amount of text is different for each product the price and shortcode button at the bottom are not aligned.

    I’ve looked for ages and found some CSS below but it doesn’t seem to have any effect.

    This problem has been lingering for ages for me and stopping me doing loads that I would like, could you help?

    /* flex-align */
    .flex-align .wp-block-column{
    display: flex;
    flex-direction: column;
    height: 100%;
    }

    .flex-align .wp-block-column>*:first-child {
    margin-bottom: auto;
    }

    #1307841
    Leo
    Staff
    Customer Support

    Hi there,

    I would recommend using the Grid blocks from GenerateBlocks to create columns:
    https://docs.generateblocks.com/article/grid-overview/
    https://wordpress.org/support/plugin/generateblocks/

    It allows you far better control than the core columns block from Gutenberg.

    Let me know if this helps 🙂

    #1315829
    Chris

    I like it Leo, GenerateBlocks, how will I put shadows (exactly the same as above) around all of the containers that hold my blocks, in CSS? Would be good to be able to do this in Plugin Settings.

    #1316034
    Leo
    Staff
    Customer Support

    Shadows will likely be a setting with the pro version of GB.

    You can add a custom CSS like box-shadow to the grid container, then target it with CSS like this:

    .box-shadow {
        box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025);
    }
    #1320641
    Chris

    So I’m using GenerateBlocks and the blocks are the same height but again, the items in each block, pushing to the top, leave a gap under some of the buttons.

    Can I set the height of the paragraph item I have so that the price and button are at the same level?

    Can you give me name of the block so that I can reference it in my shadow css please?

    Cheers

    ps – on this page – https://mclarenskitchen.co.uk/mclarens-kitchen-shop/

    #1320992
    Chris

    Sorted it, dug deep, improvised and oh, nicked one of David’s snippets. Lovely.

    Thanks

    #1321103
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.