Submitted 8 months ago
Responsive recipe page using CSS Flex and Grid
@Antonvasilache
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.
- 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
- Not sure if it is the best way to implement the mobile design.
Community feedback
- @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@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 GitHubJoin 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