Skip to content
Submitted about 2 years ago

3-column preview card component solution

Cas•220
@iguanasplit
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

hey! its been a while, its been a while but i wanted to keep doing this!

So i was wondering about text overflow or what its recommended to use in this cases as the text doesnt fit the container, i used this three properties in my <p>
overflow-wrap: break-word; word-break:keep-all; overflow-wrap: anywhere; i dont know how common or often are this used or how correct is it.

oh and are media querys only placed at the end? i tried placing them in other parts of the code but they didnt work

i would like to get general feedback!, feel free to comment tips or advice to improve or optimize my code!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @iguanasplit, Congratulations on completing this challenge!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    1.Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

    2.You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use <article> instead of the <div>.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Cas•220
    @iguanasplitPosted about 2 years ago

    @correlucas thank you so much for the resources and the advice, i will be trying this for the next challenges, this was really helpful.

    thank you again for commenting in my solutions, have a nice day!

    1

Please log in to post a comment

Log in with GitHub

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