Support » Plugin: Toolkit for Twenty Twenty & Twenty-One, Gutenberg Blocks » Aligning elements with the bottom of cards

  • Resolved practicaleq

    (@practicaleq)


    I have a page with rows of 3 cards (using the ‘3 column cards: unstretched image’ pattern), each with a purchase button at the bottom of the card.

    I would like these buttons to align relative to the bottom of the cards (so the buttons in each row are at the same level on the screen) rather than to the text block above it, which is currently making the page look untidy as the buttons appear at different positions depending on how many lines of text are in each card.

    Thanks in advance

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Twentig

    (@twentig)

    Hi,

    Your website is password-protected so I can’t access it, but I think I understand what you mean. Twentig doesn’t include an option to do it, but you can achieve it by adding some CSS. The example below shows how to create a cols-align-bottom class that will be applied to the columns block:

    First add the following CSS in the Customizer > Additional CSS:

    .wp-block-columns.cols-align-bottom  .wp-block-column {
    	display: flex;
    	flex-direction: column;
    }
    
    .wp-block-columns.cols-align-bottom .wp-block-column > * {
    	margin-top: 0;
    }
    
    .wp-block-columns.cols-align-bottom  .wp-block-column > :last-child {
    	margin-top: auto;
    }

    Then in the block editor, select your columns block, open the settings sidebar, and type cols-align-bottom in the Additional CSS Class(es) field under the Advanced panel.

    I hope the above is useful to you.
    Tom

    Thread Starter practicaleq

    (@practicaleq)

    Hey I’m sorry, I gave you the staging version which of course you would need a login to see.

    The page is now live at https://webstore.coachingleaders.co.uk/practical-nlp-podcast-back-episodes/ so I wonder if you could take another look?

    I have added the additional CSS but I wasn’t sure which columns block to apply the cols-align-bottom to – the block containing the cards, or the block within each card that has the price and the button?

    Also I have an additional problem with the button positioning – when the browser window is at certain widths, the buttons overflow the edges of the cards (see screen shot:
    https://i.gyazo.com/6b8a483ab5921e3fad9efee2f41cb7ea.png)

    Plugin Author Twentig

    (@twentig)

    You should add the cols-align-bottom class on the parent columns block (not on the single column block), the ones which have the card shadow style. Then you need to add the custom CSS from my previous answer in the Customizer > Additional CSS (I don’t see it on your website).

    The buttons overflow the edges because they don’t have enough space. What you can do is change the columns stacking. To do so, select the Columns parent block containing the buttons and the price, and inside the settings sidebar, select “Medium screens” for the Columns stacking option.

    Hope that helps.

    Thread Starter practicaleq

    (@practicaleq)

    Yes it does! The cols-align-bottom thing works perfectly.

    I had less luck with the Columns Stacking option – the effect kicks in at some screen widths but not others, as you can see from these 3 screen shots (Edit: columns stacking is ‘medium screen’ in the first column, and ‘default’ in the others):

    https://gyazo.com/8d9e0a0377e106c0d32a7c82f5db2c05
    https://gyazo.com/cf95f5277706beb40fa22c4e2dc7b871
    https://gyazo.com/77886e36a9f2de6c7fc1b32ab755bcc3

    So I think I’m going to abandon that and just reduce the size of text in the button to make it smaller

    Plugin Author Twentig

    (@twentig)

    Glad it works. Making the button smaller is a good solution for your layout.

    Have a nice day.

    Thread Starter practicaleq

    (@practicaleq)

    Yes, it turned out I was using a fixed-width 150px button! I made it flexible and that has solved the problem.

    Thanks for all your help.

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