Product Preview Card Component

Community feedback

• 

  Saulius K.•560

  @TH3RIVPosted about 2 years ago

  Hey, this seems like a decent start, but to address your small price vertical centering issue, you can just add align-items: center for the class="prices" div.

  Now regarding your headings... No need to use multiple headings, just use one and play with font size, margins/padding to get it aligned as close to the design as possible.

  Here's a link to my solution if you would like to check the code out.

  Hope this helps.

  0

  ---

  

  Krasimir Ivanov•40

  @KIvanovvvPosted about 2 years ago

  @TH3RIV Thank you for your time to review my code! I am taking note for the heading, because I realized that it unnecessary complicated my code. I guess, I wasn't sure what I was doing :D. However about the small price centering issue, I did try your solution, but it did not do anything . Is it possible that the different displays of the elements conflict with each other and some how messed it up?

  0

  

  Saulius K.•560

  @TH3RIVPosted about 2 years ago

  @KIvanovvv | You also have a <h3> element without having a <h2> element. It doesn't break the code but is a bad practice. There's only one heading in that page. Perfume to me seems just like a paragraph with letter spacing and different font size.

  As for the centering, did you define the display property in the prices container? align-items is a flexbox property, so you have to define the display I believe for that container.

  I have mine set as an unordered list rather than paragraphs though.

  ul,
  li {
      display: inline;
      align-items: center;
      list-style: none;
      margin-right: 20px;
  }
  
  .prices {
      display: flex;
      justify-content: flex-start;
      padding: 0 0 0 20px;
      margin: 0;
  }
  

  Marked as helpful

  0

  

  Krasimir Ivanov•40

  @KIvanovvvPosted about 2 years ago

  @TH3RIV Yes It finally worked as intended , the problem was that I hadn't add the display:flex in the div.prices and so the align-items didn't worked. I will re-upload the fixed solution. Thank you for the tips and time spent !

  0
• 

  John Omoke•240

  @jomoke814Posted about 2 years ago

  You should try applying some style in your div class prices that will target both prices and center them.

  0

  ---

  

  Krasimir Ivanov•40

  @KIvanovvvPosted about 2 years ago

  @jomoke814 Thanks for the feedback, I will thought so as well but can't seem to get it right

  0