Product preview card component using Flexbox

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Kipo, well done on your first challenge! The first thing you can try is to center your component using display:grid, and typically this is placed on the body element:

  body {
    display: grid;
    place-content: center;
    min-height: 100vh;
  }
  

  The second thing I think you should do is add some reset rules into your CSS because I see that the lack of border-box is affecting some of the elements here. Here are some quick resets you can put at the top of your CSS:

  *, 
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  
  

  Since you have a flex box on your card already, you can put flex: 1 1 50% on your image section and your content section. I'd also put a max-width of 600px on the main container and center it with margin-inline:auto, and also I'd remove the max width on the content section. It's better to put the max-width on the parent because the child can just inherit the width of the parent (unless your child container really needs a width for some reason, like in the case of sizing some images).

  There's probably more to say, but I think that should do for now! Happy coding, and once again, welcome to Frontend Mentor!

  Marked as helpful

  1

  ---

  

  Kipo•80

  @rezokipPosted over 2 years ago

  @elaineleung Hi elaine, thanks for the detailed reply. Very much appreciated.

  0