@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