Responsive Product Preview Card Component using CSS Media Queries
Design comparison
Solution retrospective
What was more difficult for me was to make the design responsive and to make the code look good, it was really difficult to arrange the code well and I don't know if I really did it right. I have a few questions:
- is there a more efficient way to create responsive images than with the picture tag?
- What are the best practices for writing HTML and CSS?
I had a hard time with the picture tag because I didn't know how it worked yet, but in this challenge I learned how to use it.
Community feedback
- @thisisharsh7Posted about 2 years ago
Hey Yakia, well done! your solution looks good. To answer your question, picture tags aren't responsible for creating responsive images, they just help you render images at different widths and heights, and they are helpful when you have lots of images, but you want them to render at specific widths and heights. An image can be made responsive by setting a new value to its width property. It will then adjust its height automatically. Here, relative units such as percentages, rems, ems are required. You should create different projects , it is the best practice on its own.
hope this helps, happy coding✌️.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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