Product Preview Card Component using CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello @TomoFromEarth, congratulations for your new solution!

  Great solution again! I've one tip for you about the component alignment:

  All you've missed to have your container aligned was the property min-height: 100vh; look that when you use flex is not enought to give the container aligmnet you need to give min-height: 100vh to give a body the vertical size to align the child (in this case the container)

  body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      font-size: 14px;
      background-color: hsl(30, 38%, 92%);
      color: hsl(212, 21%, 14%);
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  TomoFromEarth•20

  @TomoFromEarthPosted over 2 years ago

  @correlucas thank you! I will add this and study it...

  1
• 

  Joel•590

  @JoelLHPosted over 2 years ago

  Hey! looks great to me. A way around is to take the main text element and set the padding to that element, then set width: 100% to all of its children, that way all of the elements will be the same size and u wouldnt have to add a lot of padding to ur button. i hope this helps Great job! happy coding

  Marked as helpful

  0

  ---

  

  TomoFromEarth•20

  @TomoFromEarthPosted over 2 years ago

  @JoelLH so you’re saying I’d set my desired padding on the text element itself and then set button max-width to 100%?

  0

  

  Joel•590

  @JoelLHPosted over 2 years ago

  @TomoFromEarth Yes, set the padding to the text-container and instead of putting padding to each individual element just set their width to 100% that way all the child element will have the same width.

  I made this pen as a reference : https://codepen.io/JL-web/pen/zYWbaOK

  Marked as helpful

  1

  

  TomoFromEarth•20

  @TomoFromEarthPosted about 2 years ago

  @JoelLH thank you so much I appreciate it!

  0