Skip to content
Submitted 26 days ago

Responsive porduct review page

qayoommunawar•160
@qayoommunawar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

how to be more good at media queries ?

What specific areas of your project would you like help with?

how to be more good at media queries ?

Community feedback

  • Marcos Travaglini•6,210
    @BlackpachamamePosted 26 days ago

    📌 Some accessibility and semantics recommendations for your HTML

    • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">
    • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
    • You can use the <picture> tag to change the image according to the screen size. More info
    Marked as helpful
    0
    qayoommunawar•160
    @qayoommunawarPosted 26 days ago

    @Blackpachamame Thank You for your suggestion, gonna commit changes soon.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord