My First responsive website design

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Gaurab Bhowmick, congratulations for your challenge solution!

  Your product card seems really accurate, but there's three aspects you can consider to change in your CSS.

  1.Apply max-width instead of width to create a flexible container in a width under the percentage you set as width that's a fixed value.

  2.Fix your card-image behavior on mobile, the image is stretching so you can have a little more responsive adding two properties that will have a better fit and will not let your image stretch. Using object-fit: cover; to keep your image inside the container limits and object-position: center; to choose where the image will be position while the card become smaller. Code below:

  .cardimage {object-fit: cover; object-position: center;}

  3.There's a red border around the container, maybe you did on purpose, but if is not the case, you can remove it from .mainsection or just delete the border property:

  .mainsection {border: none;}

  Try that and say me if works. I hope this can help to improve your solution. Keep it up.

  Marked as helpful

  1

  ---

  

  Gaurab Bhowmick•90

  @Gaurab019Posted over 2 years ago

  @correlucas Thank you for your detailed feedback

  the red border i had drawn to understand the layout but later forgot to remove.

  I didnot know about max width so i had to create multiple media query. I will look into it and update my solution.

  Like max width I didnot read much about the image fitting properties......I will use the object fit as well and read about it.

  1