Product Card Compo using Tailwind for the first time and CSS

Community feedback

• 

  Plinsinga•310

  @codedforfree

  Posted almost 3 years ago

  Good start at using tailwind. With tailwind it’s just a bit getting used to. You would be surprised how easy and logic all classes are. What can help is using a tailwind afdoen for visual studio code. But only if you’re using that as you’re code editor.

  I did this challenge with tailwind only so you can always take a peak 😉.

  Keep it up and looking forward to your next project.

  01

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Kenbak, congratulations for your new solution!

  Another great solution! Its amazing, you need only some adjustments:

  The container is a little bit bigger than the value you've used is around max-width: 900px remember to use max-width for responsive elements, you've used width and this makes the container with a fixed size.

  .container {
      max-width: 900px;
  }
  

  To make your image fully responsive add display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  A better and easier way to manage the product image is by inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html If you're not familiar with the picture tag you can look at the documentation to see how to set it: https://www.w3schools.com/tags/tag_picture.asp

  👋 I hope this helps you and happy coding!

  01

  Marked as helpful