Responsive Product Card Design

Community feedback

• 

  S MD suleman•3,530

  @sulemaan7070Posted almost 2 years ago

  A few things you can add to make it perfect.

  1. font family and font-weight to the h1.
  2. font family of the pricing section.
  3. you can give the image a max-width of 100%(so that it can be fit to the div).
  4. finally the text-container should be limited to a certain width on the mobile view
  5. you can change the whole body color instead of wrapper

  Marked as helpful

  0

  ---

  

  Dheeraj Kumar Yadav•30

  @Dheeraj-Yadav8178Posted almost 2 years ago

  @sulemaan7070 Thank you for giving your feedback😊, I will keep these things in mind from next time.

  0
• 

  Piyush jain•220

  @PiyushJain01Posted almost 2 years ago

  Hi 👋 You can give background :#ffe6ff; to body instead of .wrapper because in mobile view some area at bottom side is not covered by the color also the wrapper is not aligned vertically center (in small screens). You can add the below code to fix these problems.

  body {
      height: 100vh;
      display: flex;
      background: #ffe6ff;
      flex-direction: column;
      justify-content: center;
  }
  

  I hope this will help you. Rest all is perfect. Happy Coding :)

  Marked as helpful

  0

  ---

  

  Dheeraj Kumar Yadav•30

  @Dheeraj-Yadav8178Posted almost 2 years ago

  @PiyushJain01 Thank you for giving your feedback😊, I will keep these things in mind from next time.

  0
• 

  Can•235

  @escarcanPosted almost 2 years ago

  Looks good! just remember to add the "alt" attribute to your img tags to improve accesibility and wrap your code with a main tag to fix your reports.

  0

  ---

  

  Dheeraj Kumar Yadav•30

  @Dheeraj-Yadav8178Posted almost 2 years ago

  @escarcan Thank you for giving your feedback😊, I will keep these things in mind from next time.

  0