Page 1 of 1

Allign buttons of Cards in Card Container - RESOLVED

Posted: Sat Jun 27, 2020 11:03 pm
by onlye
I have a card container with 4 cards in wide views and 2 cards on 2 rows in narrow views. The cards have a button to link to the detail page in the site. Is there a way to have the "Read More" buttons lined up horizontally?

I also tried using text in a footer and it looks nice but I can't make a link from the footer.

https://www.onlye.org/postweb/jjts/

To change from 4 cards per row to 2 cards per row as the view width narrows I created 2 card containers with 2 cards each and used variants to make the 4x container or the 2-2x containers visible. It there a way to have a card container wrap from the 4x cards to the 2-2x cards at a breakpoint and then stack them using the regular breakpoint setting? Or is what I did the correct way to do this?

thanks!

Re: Allign buttons of Cards in Card Container

Posted: Sun Jun 28, 2020 7:46 am
by Pablo
yes, this is possible:
https://www.wysiwygwebbuilder.com/suppo ... align.html

- make sure the 'Read More' button is the last card item
- use a negative bottom-margin, for example -20
This causes the button to align 20 pixels from the bottom of the card.

Re: Allign buttons of Cards in Card Container

Posted: Sun Jun 28, 2020 3:19 pm
by onlye
Pablo - THANKS!

Buttons fixed and look as desired

Second question:

To change from 4 cards per row to 2 cards per row as the view width narrows I created 2 card containers with 2 cards each and used variants to make the 4x container or the 2-2x containers visible. It there a way to have a card container wrap from the 4x cards to the 2-2x cards at a breakpoint and then stack them using the regular breakpoint setting? Or is what I did the correct way to do this?

Re: Allign buttons of Cards in Card Container - RESOLVED

Posted: Sun Jun 28, 2020 3:48 pm
by Pablo
You can use flexbox properties to control the layout behavior of the cards.
http://wysiwygwebbuilder.com/flexbox.html

For example, set the flex basis of the card to 50% to let it take up 50% of the width.