Skip to content
Submitted 8 months ago

Utilizing grid and CSS variables

Stefan Holmgren•220
@stefan-holmgren
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Not really sure I'm that proud of anything in this solution.

Felt like iI was all over the place all the time.

I think next time I'll go with mobile-first design and then move to desktop.

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

Updating the css for mobile design. Should have done it first.

Also, tried to use a table element for nutrition, but that was so horrible to style, so I went with an ul instead, with grid layout.

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

If there is a good way to style tables? I mean dang!

Community feedback

  • Anton Vasilache•580
    @AntonvasilachePosted 8 months ago

    Hello there! 👋

    Really nice work, looks almost pixel perfect.

    The only suggestion I would think of is to add some spacing between the instructions list items. Maybe like a flex container with a small gap.

    Hope that helps.

    Other than that, it looks impressive. Good job.

    Marked as helpful
    0
    Stefan Holmgren•220
    @stefan-holmgrenPosted 8 months ago

    @Antonvasilache

    Thank you :)

    I totally missed that part, so good find. I made it a Grid container with a small gap (so I didn't have to make a "flex-direction: column" :) )

    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