Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-column-preview-card HTML, CSS, FLEXBOX

coc0dev 190

@coc0dev

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback welcome! Starting to learn about flexbox and media queries.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hello there! 👋

Good effort on making the site responsive! 👍

There are some things that you can do to make the site better.

  • I would recommend making the body element as the flex container instead of the box element. Then, remove the margin from the box element. By making the body element as the flex container, the cards should be perfectly in the middle of the page.
  • I recommend setting a min-height on the body element to make the cards vertically center. Also, add some padding on the body element to prevent the card from touching the edges of the browser.
  • The car icons are decorative images. I can tell it because if they don't exist then there would be no missing information.

That's it! Hope you find this useful! 😁

Marked as helpful

0

coc0dev 190

@coc0dev

Posted

@vanzasetia Thank you! I appreciate the help!

0
Vanza Setia 27,795

@vanzasetia

Posted

@coc0dev You're welcome! 😉

0

@HanningtoneM

Posted

This comment was deleted

0

Vanza Setia 27,795

@vanzasetia

Posted

@HanningtoneM Hey, Hanningtone Monda! Next time, please avoid asking the solution author to mark your comment as helpful. It can put unnecessary pressure on the solution author to mark your comment as helpful, which is best avoided.

Also, It's best to help others without expecting anything in return. If the solution author marks your comment as helpful then it's a bonus. 🙂

To learn more about what you should and you shouldn't do, you can read the Frontend Mentor community guidelines.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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