Submitted almost 3 years ago

Responsive Product Preview Card

EJ•100

@ejionaut

A solution to the Product preview card component challenge

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

Code

Please log in to post a comment

Community feedback

Oshu•760
@oshudev
Posted almost 3 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

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