Skip to content
Submitted over 2 years ago

Responsive Product Preview Card

EJ•100
@ejionaut
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

There were quite a few things I struggled with and one of them is the responsiveness of the website. I am not sure if I did the sizing right.

I would love some feedback on the work, as I am a beginner :)

Community feedback

  • Oshu•630
    @oshudevPosted over 2 years ago

    Hi EJ 👋. You've done well on your first challenge. About responsiveness, there is a trick that I always use. Do max-width: (whatever the size you want) then width: 100%. In this way, when the view width is less than the set max-width, it will naturally scale to whatever the size of the parent element is. Then consider using the main tag and wrapping the card for accessibility. It goes like this:

    <body>
 <main>
  <section class="Main-Display"></section>
  <div class="attribution"></div>
</main>
</body>

    Another thing is that you can't use z-index if there is no position property. And also, align-self and justify-self can't be used if you're not using display: grid. You should use align-items and justify-content on flex-box. Also, check the report for other issues as well.

    Marked as helpful
    1
    EJ•100
    @ejionautPosted over 2 years ago

    @eurus1108 I see! Thanks for the tip :) I'll try to play around with it more. I got confused in the align and justify parts, glad to learn the difference now.

    0
    Oshu•630
    @oshudevPosted over 2 years ago

    @ejionaut I'm glad I helped you. You can follow me to see the challenges I've done, so you can have a reference for your future challenges.

    0

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