Product Preview Card Component

Community feedback

• 

  Adriano•38,290

  @AdrianoEscarabotePosted about 2 years ago

  Hi Dev Gobind Ganguly, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  Example:

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Dev Gobind Ganguly•30

  @devgobindPosted about 2 years ago

  @AdrianoEscarabote Thanks for the tip. I tried giving height to 100vh but it is taking additional space due to the visible scroll bar. Will using min-height remove the scroll else I have to provide the scroll as hidden which is an extra line of code

  0
• 

  Fritz•300

  @fritzadelbertusPosted about 2 years ago

  Hello @devgobind. First of all, congratulations on finishing this challenge!

  Here are some few suggestion I can give:

  • Using <picture> tag is a better practice in this challenge where the image source change according to the screen width. See this on how to use it.
  • The <h1> tag is used for the main header of the document so I suggest changing the

  <div class="price btm-pad">
         <h1 class="d_price">$149.99</h1>
         <p class="o_price">$169.99</p>
  </div>
  

  to something simpler like this:

  <p class="price">$149.99<span class="o_price">$169.99</span><p>
  

  I hope it's helpful and happy coding!

  Marked as helpful

  1

  ---

  

  Dev Gobind Ganguly•30

  @devgobindPosted about 2 years ago

  @fritzadelbertus Thanks for the suggestion. I did not think of it this way. Thanks again for the suggestion, I will update it in my challenge and will use it in the next challenges.

  0