It's worth having a read of this post I wrote about planning html which looks specifically at this challenge. I recommend you update your html and this will explain why/how.
It's also worth reading about why font size (and letter spacing and line height) must never ever be in px which is explained on another post on the site.
You need to remove the widths and heights in this solution. It is making it inaccessible. The component should only have one max width.
The img can be width and height 100% along with display block and object-fit (the img should be one img inside the picture element not two img elements)
The button should not have an explicit width and height either. Width 100% and padding only
Really important - the media query should be defined in rem or em and should be set at a point where the layout needs to change. That will be much larger than 375px. There is no room for the desktop layout at 376px.
On your next project (or on this one if you really want to do it right) make sure you are working mobile first. Mobile styles should always be the default.
Definitely don't style on IDs. There's a post all about that on the site too.
Really this is not the right challenge to be doing as a first one. Most of these issues get ironed out in the QR code challenge. Doing them in a good order will help you learn progressively and prevent the feedback amount from being overwhelming (again there is a post suggesting an order for these challenges)
Marked as helpful
@MeaganA
Posted
@grace-snow Hello Grace! Thank you for your feedback. I agree that I should start with the QR code challenge first. On my next challenge, I will take your and @claudionetto advice to do away with the ID selectors. I started building this challenge desktop-first instead of mobile-first, so I figured out why I mainly used width, height, and pixels for sizing certain elements on this challenge. So I am definitely to work on that. Thank you again for this feedback. I know I still have a lot to learn, but I am up for a challenge. :)
