Responsive Product Preview Card Solution with Sass, Flexbox and Grid
Solution retrospective
I am most proud of being able to incorporate responsive images and CSS Grid in this project. Both topics are fairly new to me, as I've only dealt with the basic media queries and making layout/ text content responsive, but haven't really applied that to images. I also have always used Flexbox for everything, and I think that understanding Grid provides another amazing option to formatting layouts.
What challenges did you encounter, and how did you overcome them?I encountered challenges with having the browser choose the right image to display at different screen sizes. I started off using srcset and the sizes attribute to set the widths of both images, but I think that both images being so similar in width, and actually having the smaller, mobile image (686px) have a larger width than the desktop image (600px) was confusing for the browser. I later found out about the picture element where you can specify multiple sources for different media conditions, which ended up being the exact solution I was searching for.
What specific areas of your project would you like help with?I read on stackoverflow that you have to add the class on the img tag to style it, I was wondering how come adding it to the picture element doesn't work?
//why not this?
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@jguleserian
Melissa, I really liked your solution. While I am no expert, I think I may have some insight on your musing presenting in your submission.
Technically, the
<picture>element will take the global attributes, see W3Schools <picture> element. However, since this element is really just a container, anything you do to affect it is only affecting a generic container, not the individual image displayed in it.To affect the individual images, you have to attach formatting to them directly. The reason for this is likely that, given the parameters for display defined in each listing of an
<img>or<source>, the chosen image may have to be displayed differently, with different filters, fitting of containers, borders, etc. Moreover, putting the styling directly on the individual image gives you more control over the final appearance.I hope you find something helpful in here. Thank you again for sharing your solution.
Happy coding!
Jeff
Marked as helpful
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