Product card preview

Community feedback

• 

  Lucian Ioan Chirilă•50

  @LucianIoan31Posted over 1 year ago

  Hi!

  Good job for completing the challenge.

  Looked over your CSS code. Try to make it look better visually. Some of your lines of code are not indented as the others.

  Try not to use class names with caps. It looks better when your code is all written with non-caps letters.

  If you make any changes to the design, don't forget to generate another screenshot.

  Good luck with the other challenges.

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="main"> with the main tag, <div id="PERFUME"> with <p>, <div class="name"> with <h1> and <div id="write"> with <p> to make the page/content accessible. click here for more on web-accessibility and semantic html

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  To center .main on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

  The body has a wrong background-color. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  There is no need to give .main and .main2 a height value but rather give .main2 a padding value for all the sides, to prevent the content from overflowing on smaller screens.

  For a responsive content, replace the width in .main with max-width.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1

  ---

  

  Willy-Wonka28•10

  @Willy-Wonka28Posted over 1 year ago

  @Hassiai Thanks for the advice. It's really wholesome. I'll try to use rem and em more often.

  0
• 

  Steve•1,170

  @peanutbutterjllyPosted over 1 year ago

  when setting your border-radius and margins (top and bottom) you can use the short-hand instead of setting it individually for top-right-bottom-left.

  MDN border radius

  MDN margin

  Also, I'd use flex box or grid with gap instead of setting margin-bottom for a lot of your elements.

  MDN gap

  Good job completing your solution, it looks good! keep it up.

  1