Trying to solve product preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Mandresy, congratulations to have finished another challenge!

  You've done a good job with the html structure, I liked that this time you've used the <picture> tag to use both images inside the same element.

  👾Answering your question about your next challenge, I've a good one for your, a little bit harder than the other two you've done:

  --> Order summary component:

  https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj

  ............................................................................................................................

  I have some considerations about the CSS part:

  1.Like I told you in your previous challenge, if you use the flexbox approach to align this component, there's no need to use position: relative to align the component, you can simply use the flexbox alignment properties inside the .containerand body.Not that all you need to do is delete all the properties related to the position: relative like left, top, right and bottom. The flex is already set inside the .container now you need only to apply flex to the body and set the heightas min-height: 100vh; for the alignment.

  2.For the right column, you don't need to set a single padding for each element, to write few lines of code and focus only on one property to manage the column padding, just add a single padding property for all the column inside the class called .right-content. For example a padding of 24pix to create a space between all the elements and the border.

  👾 I hope it helps you and happy coding!

  See below the fixes I've applied to your code:

  body {
      min-height: 100vh;
      font-family: 'Montserrat', sans-serif;
      background-color: hsl(30, 38%, 92%);
      color: hsl(228, 12%, 48%);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .container {
      display: flex;
      flex-direction: row;
      border-style: none;
      width: 600px;
      height: 510px;
     /* position: absolute;*/
      /* top: 10%; */
      /* bottom: 0; */
      /* right: 0; */
      /* left: 0; */
      margin: 0 auto;
  }
  

  Marked as helpful

  1
• 

  mandresy andri•90

  @mandresyandriPosted over 2 years ago

  Hello Lucas ! Thanks for your advice, I'll start now the challenge that you recommended and I'll apply all your code improvement.

  Thank you so much for all your advice it's very kind.

  See you next week 🙂

  1

  ---

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @mandresyandri You're welcome Mandresy, keep coding! 🙂

  1