Responsive Product Card Design

Community feedback

• 

  S MD suleman•3,510

  @sulemaan7070

  Posted over 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

  01

  Marked as helpful
• 

  Piyush jain•220

  @PiyushJain01

  Posted over 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 :)

  01

  Marked as helpful
• 

  Can•235

  @escarcan

  Posted over 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.

  01