Mobile first HTML, CSS with Flexbox

Hi 👋 @danmlarsen,

Great solution. It matches the design very well, despite not having access to the design file. 👏

Even without the design file, one method that helps is to install a plugin like PixelParallel or PerfectPixel so you can overlay the design screenshots on to your solution and compare them directly to each other 🔎, and then make adjustments as needed.

For example, in the desktop view, you have the product-card currently set with a min-height: 46rem; (equivalent to 460px in the root font size you set). But using the PixelParallel extension alongside the Chrome inspection tools, I was able to just that min-height value up and down and watch it change until it matched the design. The design height is probably more like 450px (equivalent to 45rem in your system) and so your design is a little bit too tall. Something to consider 🤔.

Happy coding. 💻

Eli

Hey Dan, you are doing a great job of solving this challenge, your code is clear and easy to read.

I have just one suggestion, as you can see in the challenge folder we have two images, one for mobile and one for desktop, instead of using the image as a header background, check out this article to understand how to render images properly based on the device by using <picture>, with that the images are fully accessible and the browser upload just the right images with the right device.

Don't forget to add the alt text if you decide to use this approach.

Cheers✌️

                          📖Keep Learning 💻Keep coding