Product preview card

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. You are right there's too many margins. You can replace the majority of them with padding.

  • If you add padding: 30px; to the right side, you can remove every margin left. This also goes for margin-top on .perfume. The margin to create more space between the other elements can stay.
  • You have margin: 0 auto; on the body. you can remove this, flexbox is already doing this.
  • When on small screen, there is a gap between the image and the bottom card. You can fix this by applying these changes
  • When applying flexbox you don't need to add flex-direction: row;. by default flexbox is set to row.

  .container {
    display: flex;
    flex-direction: row;
    height: auto; /* change to this */
    width: auto; /* change to this */
  }
  
  /* add this to the css rules */
  .left {
    width: 370px;
    height: 550px;
    border-radius: 7px 0 0 7px;
  }
  
  /* change to this */
  img {
    height: 100%;
    width: 100%;
  }
  
  @media (max-width: 768px) {
  /* you don't need this body in the media query. you already have this at the top of your css. */
  /*   body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0 auto;
    }
   */
  
    .container {
  /* you can remove the rest except flex direction. if you change the height and width of the container on top, you don't need the rest of these lines  */
  /*     display: flex; */
      flex-direction: column;
  /*     justify-content: center;
      align-items: center; */
    }
  }
  

  Marked as helpful

  0

  ---

  

  MattylDevs•100

  @MattylDevsPosted about 1 year ago

  @hitmorecode

  Super sorry for the late reply, its not been a great month.

  Thanks for your advice much appreciated! So i think ive followed your instructions correctly, however the button and the spacing on the right of the paragraph is a little off.

  If you find the time to have to have a look i'd appreciate it.

  0

  

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  @MattylDevs hi, sorry for this late reaction, somehow I missed the notification. To fix the problem with the paragraph see the changes below. I also added the solution to fix the button.

  .description {
    width: 310px; /* change to this to fix the spacing on the right of the paragraph*/
    /*margin-left: 40px;*/
    font-family: Montserrat, sans-serif;
    color: hsl(228, 12%, 48%);
    text-align: left;
    font-weight: 500;
    line-height: 22px;
  }
  
  .btn {
    /*margin-left: 40px;*/
    margin-bottom: 50px;
  /*   width: 250px; */ /* remove this line so that the button fills the width */
    height: 50px;
    background: hsl(158, 36%, 37%);
    color: white;
    border: none;
    font-family: Montserrat, sans-serif;
    text-align: center;
    border-radius: 10px;
    padding: 20px;
    /* add these three lines to fix the text inside the button */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

  Marked as helpful

  0