Product Preview Card Component

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted 9 months ago

  Really nice job it looks great. Still I have a few suggestions on how you can improve.

  • When working with images (in this case two different images for two different screen sizes) it's best to make use of the picture element.

  Picture element here you can get information on how the picture element works and how you can use it. The HTML picture element explained this is a good video tutorial on this subject.

  I see you are using CSS rest which is a good thing, but you need to add these two lines to it.

  padding: 0; 
  box-sizing: border-box;
  

  This I wouldn't add it to .main-container I would add it to the body

        .main-container {
          height: 100vh;
          background-color: hsl(30, 38%, 92%);
          display: flex;
          justify-content: center;
          align-items: center;
        }
  
        body {
          min-height: 100vh; // it's good practice to use min-height: 100vh on the body
          background-color: hsl(30, 38%, 92%);
          display: flex;
          justify-content: center;
          align-items: center;
          // you can add this to the body as a font-family fallback
          font-family: arial, helvetica, sans-serif;
        }
  

  You could have combined .title-styles and .discount into one CSS rule. Both of them use the same font-family

  .title-styles,
  .discount {
      font-family: Fraunces;
  }
  

  As for your media-query change the max-width to 600px. This will prevent the right side of the card to overflow to the left side.

  Keep it up

  Marked as helpful

  1
• 

  Ilya Andreev•750

  @NeoScripterPosted 9 months ago

  I would use flexbox instead of grid layout in the small container so that your website gets more responsive when you reduce the width of the page. Currently, when I gradually reduce the width of your page, the image collapses and overflows to the right. Flexbox will definitely help.

  Marked as helpful

  1
• 

  Federico Salerno•210

  @Federico-SalernoPosted 9 months ago

  good job! It catches my attention that you do not use a .css style sheet. In case you don't know how to do it, you can create a style.css file in your main folder and connect it to your HTML sheet with the <link rel="stylesheet" href="style.css"> tag. Then just cut and paste the styles from your `

  Marked as helpful

  1