Responsive Four card feature section

Community feedback

• 

  P

  Carl•1,075

  @CarlHummPosted 3 months ago

  Hi k-hroma, I think I understand what you mean.

  I assume when you say they 'lose proportions' you are refering to some cards appearing wider, or shorter than others towards the mobile/tablet viewport.

  The default value for align-items is stretch. So normally flex children will stretch to fill 100% of the space of the parent container on the axis they are defined. Because you've set it to center, the items will instead center themselves and base their width and height values on their content instead.

  If you look, the content differs from each card. Some paragraphs are longer or shorter than others. If you resize the browser you can see the paragraphs wrapping and unwrapping, causing different card widths.

  You could solve this by giving the cards a relative width like 100% and then setting a max-width at different viewports. Or leave the alignment as stretch and instead center the parent container, and then change alignment for desktop viewports.

  Apologies for the bad formatting, and good luck on your next challenge!

  Marked as helpful

  0