Responsive Product Card using HTML and CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  Hello, @nyarkoohene!

  Your project is looking fantastic!

  I'd like to suggest a few things to make it even better:

  • Using margin isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

  📌 Also, you can use the <picture> tag when you have different versions of the same image.

  Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

  Example:

  <picture>
      <source media="(max-width: 460px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  0

  ---

  

  nyarkoohene•10

  @nyarkoohenePosted 8 months ago

  @danielmrz-dev thanks a lot. particularly for the tip using the <picture>. I was thinking of how to achieve it but it was only JS that kept coming to mind. Learnt something new.

  0
• 

  EMMANUEL DAMILOLA•170

  @DAEM007Posted 8 months ago

  • Nice work nyarkoohene.

  1