Frontend Mentor | Product preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Bonjour Alexis, congratulations for your new solution!

  I saw your live site and there are some stuff you can improve, the first thing I saw was the text alignment for the second column, all the content should be text-align: left. I created this solution using grid instead of flex if you want to know my approach, see the following steps

  To build this component with 2 columns all you need to do is create a main block to hold all the content (you can use <main> to wrap), set its width as max-width: 900px (it's the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 450px).

  Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you can manage the product image 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

  👨‍💻 Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1