product-preview-card

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  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

  0

  ---

  

  Sumedha Koranga•70

  @sumedhakorangaPosted 6 months ago

  Thankyou so much @danielmrz-dev

  1
• 

  Tharun Raj•1,330

  @Code-BeakerPosted 6 months ago

  Hi there, congratulations on successfully completing this challenge. You've done a great work on this one! 🎉

  Your HTML is well structured and you've used the appropriate tag for the elements. However, I came across some issues when I opened it on mobile view.

  • the image was overflowing the container.
  • the font-size wasn't responsive for smaller screens.

  The max-width of the image should be 100%. It will help the overflowing of the image.

  Using flex isn't wrong but, an easier option would be grid. Grid is easier to make layouts like this and to make responsive.

  On mobile design, you can make it like this:

  .container {
  display: grid;
  grid-template-columns: 1fr;
  }
  

  and on desktop, you can change it like this:

  @media (min-width: 800px) {
    .container {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
    }
  }
  

  I suggest you to play a little with your media queries and adjust the font-size for smaller screens. Currently it is too big and is nearly overflowing the container.

  If you wish to learn more about responsive design, check out these articles from:

  • freeCodeCamp
  • MDN

  I hope you find this helpful! 😄

  Marked as helpful

  0

  ---

  

  Sumedha Koranga•70

  @sumedhakorangaPosted 6 months ago

  Thankyou so much @Code-Beaker

  0

  

  Tharun Raj•1,330

  @Code-BeakerPosted 6 months ago

  Glad to help, @sumedhakoranga 😄

  0