Product preview card component

Community feedback

• 

  3nkywh•80

  @3nkywhPosted over 1 year ago

  This comment was deleted over 1 year ago

  1

  ---

  

  Lahcen•160

  @LahcenalllPosted over 1 year ago

  @3nkywh I just tried it, and it worked, but I don't know how it worked, could you explain to me what I did wrong please ? Thanks.

  0

  

  ashebani•400

  @ashebaniPosted over 1 year ago

  @Lahcenalll at first you didn't specify the height and the width of the icon, therefore the icon stretched since it has a flex property on it, this can be fixed by sitting a height and width to the item you want to keep the same, you can also use aspect-ratio: 1 / 1 to give the item the same height and width.

  Marked as helpful

  0
• 

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  Good job 👍, but I have some recommendations!

  • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
  • Remove width: 100% from the body, body is a block level element which by default takes full space available, so width: 100% does nothing here!

  Marked as helpful

  1

  ---

  

  Lahcen•160

  @LahcenalllPosted over 1 year ago

  @lack21 Thanks a lot ! Do you know how to center the content inside the button ?

  1

  

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  @Lahcenalll Add these styles to the button

  display: flex;
  align-items: center;
  

  it should center the content!

  1

  

  Lahcen•160

  @LahcenalllPosted over 1 year ago

  @lack21 I'll try it ! thanks.

  1
• 

  Adel Al Qosi•250

  @Adel-Al-QosiPosted over 1 year ago

  You can use flex to do so like this:

  .button-class {
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  0