Card alignment of objects

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
lpug
 
 
Posts: 114
Joined: Thu Apr 05, 2018 10:15 am

Card alignment of objects

Post by lpug » Mon Jan 20, 2020 4:02 am

Hi Pablo,

Could you take a look at this small project I have uploaded https://www.dropbox.com/s/zq221gvb678hj ... k.zip?dl=0
When you preview the file you will notice that all the read me buttons are not aligned....I understand that this is caused by the text above the divider.
To fix this is it a matter of adjusting the padding/margin of the text or divider? you will understand once you preview the project. Check out the breakpoints aswell. Is there a more effective way to fix this.

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Card alignment of objects

Post by Pablo » Mon Jan 20, 2020 7:05 am

The 'Read More buttons are not aligned because the texts have different lengths.
But you can use a negative (bottom) margin for the last item, to align it at the bottom of the card.

lpug
 
 
Posts: 114
Joined: Thu Apr 05, 2018 10:15 am

Re: Card alignment of objects

Post by lpug » Tue Jan 21, 2020 12:05 am

Thanks Pablo, in design view looks spot on, in preview mode the buttons and dividers are all over the place. Am i better off creating the cards with individual layout grids (I'm assuming I will be in the same boat because the grid size is dependent on the content. Do I have any alternatives other than ensuring all of my text content is the same size and characters.

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Card alignment of objects

Post by Pablo » Tue Jan 21, 2020 7:22 am

If you place the cards in a flexbox container or card container then the height will be made equal automatically.
Then all you will have to do is make sure the buttons are at the bottom by using a negative (bottom) margin.

Post Reply