Submitted over 3 years ago

3 column preview card with responsive layout (HTML CSS Flex)

Tom•115

@Tom2612

Preview site View code

This is a solution for...3-column preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Completed challenge. Feedback: Correct use of heights in this. Having trouble centering vertically (can't figure out which units are best and how to center the card in the middle of the page - had to resort to using margins and changing the height values in the media query). As you will see, the little sub text at the bottom disappears when in mobile view but is present in wide view.

Any tips and advice on how to improve on this would be a really big help! Thanks in advance.

Community feedback

dewslyse•3,025
@dewslysePosted over 3 years ago
Hello Tom! Good job on this.

On centering the card, you're already on the right track. You need to set the height on your .container selector and set the margin to auto. You should do away with the 196px margins top and bottom.
Marked as helpful
0
Tom•115
@Tom2612Posted over 3 years ago
@dewslyse Thanks for your response. Would you set height to a relative unit or absolute? By my understanding (which is usually wrong at this stage), an absolute unit of height wouldn't make the page responsive? I will try out what you suggest.
0
dewslyse•3,025
@dewslysePosted over 3 years ago
@Tom2612 In this case you would want to use a viewport unit (min-height: 100vh).

Also note that the buttons on your card in mobile view (@media (max-width: 880px)) are partially hidden. This is because you've hard-coded the height in .card-layout selector. You can either set to it as min-height or remove it.

All the best
0

Please log in to post a comment

Join our Discord community

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