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.
@progressive-newbie263
Posted
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.
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
