Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card Component - Second Solution

P

@jguleserian

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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.

What challenges did you encounter, and how did you overcome them?

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).

What specific areas of your project would you like help with?

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

Community feedback

@Yago14

Posted

Ótima Solução

0

Please log in to post a comment

Log in with GitHub
Discord logo

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