product preview card

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  Hello, @muqsith3!

  Your project is looking fantastic!

  I'd like to suggest a way 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;
  }
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  1
• 

  P

  yinnie•280

  @wcyin9Posted 7 months ago

  Hello there! You did a good job with the structure overall. Keep up the great work!

  To provide you with some aid regarding responsive design and image sizing:

  1. since the design is full screen with no scroll needed, you can get rid of the scroll bar in your own code. To do this, you add height: 100vh; and overflow: hidden; to the body selector in css. This will get rid of the scrollbar and keep the card fullscreen.
  2. adding a max-width to the container will keep the card from being too big. The given width of the card in desktop is 343, whereas the width in the mobile is 600. Thus, you can add max-width: 600px; to your mobile container, and max-width: 343px; to your desktop container.
  3. for your images, you can use picture tag in your html and implement source srcset="image.png" media="(min-width: number)". This website explains how you use that element perfectly. The purpose of adding that code is so the image automatically switches with the media query. In addition, you can add max-width: 100%; to img in CSS to ensure it will never overflow the container.

  Marked as helpful

  1