Submitted 24 days ago

responsive product review card using html and css

anthony• 170

@Codingtry123

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

use http://lab.maltewassermann.com/viewport-resizer/ to test the web page under different browser size

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

how do I emulate mobile device on laptop using http://lab.maltewassermann.com/viewport-resizer/

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

how do I Create multi row layout with responsive design?

Community feedback

MikDra1• 5,610

@MikDra1

Posted 24 days ago

CSS Grid:
- Use display: grid.
- Set grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) for flexible columns.
Flexbox:
- Use display: flex; flex-wrap: wrap;.
- Define item widths with flex: 1 1 200px.
Responsive Adjustments:
- Apply media queries to adapt the layout for different screen sizes.

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉

Marked as helpful

Rowert Méndez• 70

@P0wertDev

Posted 23 days ago

The website you used is great. I use a chrome extension.

Marked as helpful

Please log in to post a comment

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