Skip to content
Submitted 8 months ago

Responsive recipe page using CSS Flex and Grid

Anton Vasilache•580
@Antonvasilache
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?
  • Creating multiple lists with custom bullet points, applying common formatting, and then customizing each, as so:
.prep-list-item::before,
.ingredients-list-item::before,
.instructions-list-item::before {
  content: "•";
  font-size: 1rem;
  color: var(--Nutmeg);
}
  • Creating the media queries to match the mobile design file.
  • Creating the table by using grid in a simple and effective way.
What challenges did you encounter, and how did you overcome them?
  • Grouping up the lists to apply common attributes, before styling them individually. I tried to not repeat myself, but it took longer than writing them separately.
  • Tried to create the table using the `` tag, but couldn't add margins and borders at the same time, so I switched to grid
  • Figuring out how to follow the mobile design properly, without changing the page structure
What specific areas of your project would you like help with?
  • Not sure if it is the best way to implement the mobile design.

Community feedback

  • geektim•230
    @geektimPosted 8 months ago

    This is a job well done. I couldn't even space the list-style markers away from the texts, nor could I change the color of the number-type markers from black. Nice work!

    1
    Anton Vasilache•580
    @AntonvasilachePosted 8 months ago

    @geektim Thanks!

    Took me a long while to get it to work, to be fair.

    I added the markers color to the parent element of each list:

    .instructions-list {
    list-style-type: decimal;
    color: var(--Nutmeg); }

    Then put a span on the list elements text and added padding to space it, and changed the color to make it different from the markers:

    .prep-list-item span,
.ingredients-list-item span,
.instructions-list-item span {
  padding-left: 1rem;
  color: var(--Wenge-Brown);
  font-weight: 400;
}

    And this is the custom marker, smaller than the regular one

    .prep-list-item::before,
.ingredients-list-item::before,
.instructions-list-item::before {
  content: "•";
  font-size: 1rem;
  color: var(--Nutmeg);
}

    Hope this helps.

    Good luck!

    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