Product preview card solution

Hey Harley! Congratulations on completing this challenge. I've gone through your code and viewed you site preview. Here are my few findings listed below:

1. I believe that by this statement "The desktop design breaks when the width is less than 502px" you must be referring to the image getting center aligned vertically. This is causing because of the wrapper card has display flex and align-items is set to be centered this yields the image getting center aligned with respect to the textual content. You can simply avoid this by changing the media breakpoint.
2. By default for responsive media breakpoints, please refer to the official documentation Ideally max-width: 575px is the best breakpoint for smaller devices and min-width: 576px for min media breakpoint.
3. For the card image source tag must be used hen we have to show 2 different images for 2 different screen sizes. Please read more about source tag through the official documentation.

Other than these feedbacks Kudos to you for completing this challenge.

Thanks, Enjoy coding :)

Hi Harley,

I believe your solution is quite great and spot on. I've looked also at your code and where the breakpoint is defined is at 376px. Defining the break points is usually relative --- allow me to refer to one of Kevin Powell's lessons on responsive design -- you can define a break point based on where your layout breaks, in this case you can define the max-width at 570px or there about.

Mobile screens and small screens are usually at max-width: 600px which is used in most cases, but the best break points is based on where your layout breaks.