Submitted 6 months ago

Responsive recipe page using CSS Flex and Grid

Anton Vasilache• 580

@Antonvasilache

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

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

@geektim

Posted 6 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!

Anton Vasilache• 580

@Antonvasilache

Posted 6 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!

Please log in to post a comment

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