Submitted 3 months ago

Product preview card component solution

Lara Mesa•180

@Lara-art

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

With this exercise, I learned how to resize the grid in media.

.grid { grid-template-columns: 1fr; grid-template-rows: 30vh 50vh; max-height: 800px; }

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

Where I had the most trouble was with resizing the image in the @media query because I couldn't get it to be the size I wanted in the grid.

img { border-radius: var(--radius-grid) var(--radius-grid) 0 0; width: 100%; height: 100%; object-fit: cover; }

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

I'd like to know the best way to find the average of the grid.

Community feedback

Quang•350
@progressive-newbie263Posted 3 months ago
You should add align-items: center for the discounted price as well.

About the grid, I used display flex (since you can adjust it via flex-direction: row and flex-direction:column) ,and change it by percentage in my submission so i am not sure about doing it with grid. But in changing queries, if you use grid, you can looking up to "grid-template-rows". I hope this helps.
0

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