Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive page using tailwindcss and css flexbox

@DearNatthaphong

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P

@hadeedji

Posted

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
Discord logo

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