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

Recipe page using Vite, TailwindCSS and configure

fl1pHover; 150

@fl1pHover

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@DarrickFauvel

Posted

Hi @fl1pHover, 👋

Nice work on the recipe page project! I also used Tailwind in my solution.

One suggestion I could recommend is try using Tailwind's responsive class modifiers. When I viewed your page on narrower screen sizes, the page was not responsive, as in the design. You should try developing your projects at the start with a mobile first view. Then for larger screen sizes, apply Tailwind's class modifiers like sm:*, md:*, etc.

So, for example, when on the smallest screen size, the top of the page should use pt-0, but for screen sizes > 640px, you can use sm:pt-10. With this, you can then think about how you can make your image touch the top, left, & right edge of the viewport at a mobile view, but for larger views you can add padding around the image, and even add a border radius.

I hope this is helpful! 😊

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