Skip to content
Submitted 6 months ago

Responsive page using tailwindcss and css flexbox

Natthaphong Thongphueng•200
@DearNatthaphong
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?

...

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

...

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

About the alignment of list-display of ul tag. It's not in the middle vertical. Please review my code.

Community feedback

  • Hadeed Ahmad•140
    @hadeedjiPosted 4 months ago

    Good job on completing the project!

    Immediately you can notice that the fonts are incorrect, this is because when specifying arbitrary font values using tailwind, replace spaces with _. So the font-['Young_Serif'] class will fix the fonts issues.

    Having said that, I would not recommend this approach, your fonts should be specified in your tailwindconfig. And I would not recommend using tailwind from a CDN either, learn how to use the tailwind cli, or vite or some similar solution.

    Your list displays are almost correct. A left margin and left padding on the list items should help get it looking like how it does on the designs.

    Marked as helpful
    0

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