@jaceleedev
Posted
Hello! First of all, I want to encourage you for taking on the challenge of learning Tailwind CSS and applying it to the challenge. It's clear from your code that you've put a lot of thought into tackling the challenges.
First, when you go below the desktop view (under 1440px), the mobile view isn't centered properly. This issue arises because Tailwind prefers a mobile-first approach. When you define the values in the screens in tailwind.config.js(ts) simply as pixel values, it sets the default as min-width. If you want to set the default as max-width, you should modify it like this:
screens: {
sm: { max: '375px' },
md: { max: '768px' },
lg: { max: '1440px' }
}
The card layout can be tricky and challenging. I recommend using CSS Grid for this. While it may not be the easiest solution, it works well if calculated correctly. Happy coding!
Marked as helpful
