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

Product Preview card components using Tailwind

@karan819381

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


i don't understad. HOw to make this mobile responsive using tailwind. its my first project using tailwind. Any suggestion to improve. plz comment. Thank you

Community feedback

Myk Escala 600

@Mikoyzskie

Posted

Hey Karan!

  • First of, clean code. Very organized.
  • In Tailwindcss, we use the classnames sm,md,lg, and xl for viewport widths or device widths
  • For example, if you want your flex-direction to be row on larger screens and column on smaller screens, you use "flex-col md:flex-row"
  • Since sm: / md: / lg: and so on is min-width not max-width
  • Hope this helps

https://tailwindcss.com/docs/responsive-design#working-mobile-first

Marked as helpful

1

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