Hi 👋 Jude,
Congrats again on another great solution. 👏 I think there are a number of different ways to implement the positioning of the cards, but I thought your solution using grid and grid-area was an excellent one.
For some alternatives to consider, check out Kevin Powell's "Responsive layout practice for beginners" YouTube video where he walks through his solution to this same challenge. He first implements an alternative solution to yours using a wrapper and col div and flexbox. But then later in the video he has a solution very similar to yours with some slight modifications that might be worth looking at.
Like with your Recipe Page solution, I also suggest installing a plugin like PixelParallel or PerfectPixel so you can overlay the design screenshots on to your solution and compare them directly to each other. There were some differences between the design and your solution that might be easier to notice with those tools.
For example, your font size of your heading class is specified as 2rem (32px). But the actual design has a font size of 1.5rem (24px) for the mobile view and 2.25rem (36px) for the desktop view. You can either add the change in font size to your media query. Or better yet, implement a fluid typography solution with just one line of CSS code that automatically adjusts the font size based on the width of the viewport. I think this fluid typography calculator is a super useful tool, but there are others out there. Here is a solution that would work by adjusting the font size between the min viewport size of 30rem (480px) and the max viewport size of 80rem (1280px), but those parameters are easily adjusted too:
font-size: 1.5rem;
font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.25rem);
Happy coding. 💻
Eli
Marked as helpful
