Product preview card component

Community feedback

• 

  Sathya D•310

  @satzzzzz07Posted about 2 years ago

  Hey there, Great work on your first solution! Design looks good. There are few suggestions:

  1. The main card element is not centered in the screen.

  Centering the Element - For Centering the element in the page you can wrap the element in a div and use flexbox more about flexbox.

  2. On the mobile screen size, the buttons or not rendering properly. I can see you mentioning a width of 95% try to center the button by using margin-left and margin-right to auto

  3. The image rendered on mobile screen is very long and you need to use a different image for mobile screen. Check the images folder for mobile-product.png. Also the height of the image needs to be small according to design. You can give a height in the media query for the image to change it for mobile screens.

  Aside these, excellent work again and happy coding :) 👍

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @vipzas1234, Congratulations on completing this challenge!

  I've just opened your live site and I can say that you did a great job putting everything together! There are some tips to improve your solution:

  1.Your component is okay but it's missing the vertical alignment. The best way to do it is by using flexbox. The first step is to add min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) aligns the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;

  body {
      min-height: 100vh;
      background-color: hsl(30, 38%, 92%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  Use the tag <picture>to wrap the product image inside the html instead of using it as <img> or background-image (with the css). Using <picture> you wrap both images (desktop and mobile) and have more control over it, since you can set in the html when the images changes setting the screen size for each image.ote that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image.

  Here’s the documentation and the guide to use this tag: https://www.w3schools.com/tags/tag_picture.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Sarayut•10

  @vipzas1234Posted about 2 years ago

  @correlucas thank .

  0