Submitted 4 months ago

Recipe Page, Flexbox & Padding.

Crystalis89•410

@Crystalis89

Preview site View code

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?

That I definitely am learning and getting faster now that finally applying in many projects what I learned the theory of in Odin Project. A confidence boost I badly needed.

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

On every single one of my projects my solution screenshot was notably different size. This project in particular, despite it fitting perfectly all the way down to 320px size screen in Chrome dev tools.

Not really sure what doing so "wrong", or at least wrong in a way that the Screenshot doesn't like.

Community feedback

P
Jerald Bianan•100
@jeraldbiananPosted 4 months ago
Nice Work!

I can give you some tips on how to properly apply customized bullets and decimals for ul and ol tags. You noticed that in the list the bullets are centered when there are 2 or more lines? You might not see this in Desktop view but in the mobile view that is for sure. In order to achieve this you have to utilize the usage of pseudo element ::before and disable the default list style type for both ul and ol, for the decimal/ordered list, it is a bit different, I have used the CSS Property "counter-reset" to achieve the correct design.

https://www.w3schools.com/cssref/pr_gen_counter-reset.php

I know Vue/React, but I used only HTML And CSS for this project, You can check out my solution if you want it might help you.
Marked as helpful
0

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