Is my observation (detailed below) wrong or is there something I am missing?
Working on this I noticed when the size(height) of a flexbox element(flex-direction: column) is not set and you place padding on a child element that precedes an image sibling or a sibling with an image as a child, the way the image is rendered gets distorted. so It is best to add padding or margins on the image or image container directly.
@Olli1989
Posted
Hello,
By default, the children of a flex container are stretched. Use align-items: center and nothing should be disorted anymore.
In your case you do not need flex-direction: column on your class order-info because everything is center anyways (you use text-align: center on your class card__order-summary.
Hope this will help you!
Marked as helpful
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
