Skip to content
OverviewSolutions
4
Comments
6

Valdimar

@valdi791360 points

Icelandic Software Engineer

Latest solutions

Latest comments

  • Valdimar•60
    @valdi7913

    Great work! Your solution looks very similar to the design. However the only things I would change are the background colors and Preparation time color, adjust the line heights of some of the text and then tweak the spacing just a bit. Otherwise it looks great, keep it up :)

  • AndresOreVel•370
    @AndresOreVel
    What are you most proud of, and what would you do differently next time?

    I used a different way to organize the labels, but I liked how it turned out. I'm sure I have other things to fix.

    What challenges did you encounter, and how did you overcome them?

    The main label got a little complicated so I applied a flex to better organize everything

    What specific areas of your project would you like help with?

    A way to be able to do not only this exercise, but any responsive page

    Social Link Preview

    1
    Valdimar•60
    @valdi7913

    Your solution is well put together. It only needs a tiny bit of adjustment to match the design better.

    You can change the min-width of body from 100vsh to 100vh and that will center the design correctly. And then change the width of the card to something like 280px rather than 89%.

    After these changes you solution should pretty much match the design.

    As a shortcut for these simple designs, I prefer to use display: grid; and place-content: center; to perfectly center a div in only 2 lines of css. Although the body tag needs to have 100vh for this to work

    As for your question about a way to be able to do not only this exercise, but any responsive page, I recommend looking into flexbox and grid css styles https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Try to never use margin to displace html elements. Personally the only place I ever use margin is just at the start of my css file to set it to 0 everywhere like this

    • { margin: 0; padding: 0; }

    Keep up the good work, you clearly have an eye for this :)

  • Valdimar•60
    @valdi7913

    Very nice touch to add your own details, somehow that didn't cross my mind when I solved this.

    Visually your solution looks identical to the design which is amazing.

    Your code is also very clean. You use very descriptive css classes.

    Keep up the good work :)

  • Valdimar•60
    @valdi7913

    Wow, this is great, looks almost exactly like the design.

    You are a pro, keep it up :)

  • Valdimar•60
    @valdi7913

    Your solution looks great!

    The only thing I would change is reducing the heading a bit so that it fits in one line, matching the design. You could also fix this by increasing the width of the card :)

    Your code also looks good and uses descriptive html tags.

    Keep up the good work!

    Marked as helpful
  • Valdimar•60
    @valdi7913

    Your qr code component is nice and centered.

    Visually, the only changes I would make would be the following

    1. Decrease font size to 24px for the heading
    2. Fix and set the padding so that all sides of the image are equal distance from the card edge.
    3. The background color also seem to be wrong
    4. The font is not the one specified in the styleguide

    Other than that the code is nice and clean. You might get some aria accessibility warnings but otherwise nice work!