Product preview card component solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello ASH2001, congratulations for your new solution!

  I saw that you tried to manage this solution using position relative and margins to create it, its kinda tricky to build this solution using these properties. My advice for is to use GRID here's a quick guide for you to use GRID:

  This is my approach to create this solution with GRID and 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).

  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

  0

  ---

  

  Abdullah•340

  @ASH2001princePosted over 2 years ago

  @correlucas thank you so much M.r Lucas I was really afraid of working with the Grid system Ill check on your work and I believe Ill learn a lot from it.

  1