Preview card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Axel, congratulations for your new solution!

  Your desktop version layout is kinda broken, I saw that you've managed the display: flex using the body and its not a best practice, let the body for background color size and alignment.

  I'll give your the tutorial to create this solution with grid that's the easiest way to create it:

  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).

  Then all you need is to manage the column with the photo and the text content vertically using gap for spacing and flex-direction column to make it vertically.

  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