Product Preview Card Component - Second Solution
Design comparison
Solution retrospective
Greetings, Everyone!
I completed this solution for the second time as part of my systematic journey through the learning paths (Building Responsive Layouts). These paths have a lot of great resources that help me fill in gaps and perfect my skills little by little.
This challenge, however, was not heavy on the "responsive" front, except for the use of the element and some media queries. Given the absolute size of the two images given, the unpredictable size of the
, and the need to create a stable `` container, the project seemed to work better with a single breakpoint at 50px.
One challenge that I faced in this project was the sizing of the element within the
element. The height was no problem as the image responded as expected; however, when I tried to do the same with the width, no matter what I did or where I put it (in the `` itself, or separately in the CSS), I could not get it to respond. Neither WWW3Schools nor MDN seemed to be of any help. I suspect I am overseeing something (which is often the case).
I someone has a minute to take a look at what I did with the and
to help me understand my error, I would be very grateful. Additionally, if you see any other issues that would be to my benefit (more efficient coding, better technique for adjustments, etc.), please let me know.
Thank you so much for taking the time to look at my work. Any feedback is greatly appreciated.
Happy coding!
Jeff
Join our Discord community
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