Product preview card using html and css

Community feedback

• 

  Natali 👻 Grimm•1,190

  @Grimm-N

  Posted 9 months ago

  @balaji282004, I really appreciate the effort you put into this! Your design is coming along nicely. I have a few suggestions that could help enhance it further:

  1. Centering the Card with Flexbox:

     • To center the card within the body, consider using Flexbox. You can add the following styles to the body:

       body {
           display: flex;
           justify-content: center; /* Centers the card horizontally */
           align-items: center; /* Centers the card vertically */
           height: 100vh; /* Ensures body takes full height of the viewport */
       }
       

  2. Use of Responsive Units (em, rem, %, vh, vw):

     • I recommend using em, rem, %, vh, and vw for sizing and spacing instead of fixed units like pixels. These units are more responsive and allow for better scalability, making your layout adaptable to different screen sizes and user preferences.

  3. Creating the Card with Flexbox or Grid:

     • It would be great to try creating the card layout using Flexbox or CSS Grid instead of positioning. This approach provides more flexibility in managing layout changes, improves responsiveness, and avoids potential overlapping issues that can occur with absolute positioning.

  Wishing you continued success in your future coding endeavors! Keep up the great work!

  20

  Marked as helpful