Product preview card component solution

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Flor, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

  You've used FLEX to create this component this is fine, since is working. In my opinion a better approach is by using GRID.

  For example 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 (its the container size) and display: grid / grid-template-column: repeat(2, 1fr)(this means that your component will have two columns with 50% of the container width each thats 450px).

  👋 I hope this helps you and happy coding!

  00

  Marked as helpful
• 

  Warren•650

  @warrenlee

  Posted almost 3 years ago

  Hi Flor, good job on this challenge! Desktop looks perfect but here's a tip on how to start getting the layout respond for mobile.

  Starting with #conteiner change width to 100% and height to auto and add flex-direction: column. On your #img change the width to 100% and since you are using background-image you'll need to set the correct background-image url, add either padding-top to give the element some height or you can use the newly introduced aspect-ratio. Spotted a minor mistake, background-repeat should be set to no-repeat rather than none

  Next, you'll need to sort out the border-radius. I'd recommend to apply it on the #conteiner and adding overflow: hidden to make the rounded corners visible. I would also recommend using the picture tag instead of background-image as you can use media queries to set the image you want to show.

  example:

  <picture>
      <source srcset="/desktop-img.jpg" media="(min-width: 768px;)">
      <img src="/mobile-img.jpg">
  </picture>
  

  I hope this helps!

  01

  Marked as helpful
• 

  P

  FO•205

  @de-furkan

  Posted almost 3 years ago

  Hey looks great. To improve on the mobile aspect - consider doing the following:

  1. try mobile first approach - build from bottom up - from smaller devices and up to larger devices. This is a great approach.

  2. Also, consider using media queries to add in responsiveness to your design.

  Otherwise, great effort, looks nice :)

  00

  Marked as helpful