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

Simple Omelette Recipe Page with Tailwind CSS

@SultanFarrel

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@GiorgiOsha95

Posted

Great job with the Tailwind CSS implementation! I noticed that the solution works well for both desktop and mobile versions. However, it breaks between screen resolutions of 640px and 1024px due to the max-w property. To improve responsiveness, you can either remove the max-w property in the container class for the 640px and 768px breakpoints or overwrite it using Tailwind utilities, for example: !max-w-full for smaller screens and lg:!max-w-[640px] for larger screens. This adjustment should ensure the design looks great across all resolutions.

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