Responsive product card with media query

Community feedback

• 

  Krishna•40

  @Krishnajangir

  Posted 8 months ago

  Very nice job but here are some feedback points:

  CSS Suggestions:

  1.Target Specific Elements for Resetting Styles: Instead of using the universal * selector, target only the elements you need (e.g., body, h1, p, img) to reset margins and paddings.

  Example: body, h1, p, img, ul, li, button { margin: 0; padding: 0; }

  2.Media Queries: Move media queries for layout adjustments to specific sections, rather than inside .main to improve scalability. Add max-width to .main to prevent stretching on large screens.

  Example: .main { width: 100%; max-width: 1200px; margin: 0 auto; }

  3.Use clamp() Responsibly: clamp() is great for responsive text, but test different screen sizes to ensure readability. Adjust font-weight and font-size for better legibility.

  4.Avoid Unnecessary overflow: hidden;: If not needed, remove overflow: hidden; from .main.

  5.Smooth Transitions: Add transition effects to button hover and active states for a smoother user experience.

  Example: .cart { transition: background-color 0.3s ease, transform 0.1s ease; }

  HTML Suggestions:

  1.Improve Accessibility for Buttons: Add aria-label for better accessibility and ensure images inside buttons have descriptive alt text.

  Example: <button class="cart" aria-label="Add to Cart"> <img src="images/icon-cart.svg" alt="Add to Cart Icon"> Add to Cart </button>

  2.Use Semantic HTML: Wrap product info in <article> and the section in a <section> tag for better structure and SEO.

  Example:

  <section class="main"> <article> <!-- Image and content --> </article> </section> alt Text for Images: Always add alt attributes for all images, including those in <source> tags, for accessibility.

  02

  Marked as helpful