Product preview card with Sass and responsive images
Design comparison
Solution retrospective
This one was so much fun!! I'd looked into Sass before, but hadn't really styled anything beyond very simple, small exercises with it. Doing this whole challenge with Sass was fun, and I'm proud of managing to organize my Sass code using partials. Also, last time there was a challenge to make font-size responsive without media queries, I used the "clamp" method with a size in just vw in the middle, and later found out this is bad for accessibility because it doesn't allow the user to resize the text easily. This time I generated typography scale in Utopia to use instead!
I'm still not very confident about working with responsive images in HTML, though. I followed the MDN guide on responsive images to get through the challenge, but just adding media="(max-width: 30rem)" and media="(min-width: 30.01rem)" to the source elements, it feels hacky and magic-number-y... but I needed the images to switch at the same time as my layout between 1 and 2 columns, and I couldn't think of another way to do it. I also... don't fully understand how it works when you use srcset and specify a width or pixel density for each image.
I had a really hard time getting the image height to adapt to the card content height in the 2-column layout. I knew it would be easy if I set the image as the background of an empty div, but this image was part of the content and seemed like it should be an actual element... I tried a lot of stuff and then searched around a lot too, and in the end finally found something that worked! I had to set the parent to position: relative, the img to position: absolute, and both to width: 100%; height: 100%;. Not sure if there's another, better way to achieve this, but at least this worked!
I would appreciate hints on responsive images with multiple sources, because even after reading the articles listed here on Frontend Mentor I was still pretty confused.
Community feedback
- @dreemanuelPosted 30 days ago
Good job!
There is a little kink in the breakpoint settings: the end dimensions is smaller than the dimensions when the screen is shrunk down before it.
I think I'm bad at explaining it, but as I'm expanding the screen size from the mobile, vertical layout, after it switches to the desktop layout (with the image on the left side of the card), the card size stretches on and on, until it reaches the final breakpoint and it then shrinks.
0@sofiasmnkPosted 29 days ago@dreemanuel
Thanks for the feedback!!
Ahh, do you maybe have a screenshot of what you're seeing...? I opened it on responsive design mode in Safari, Firefox and Chrome and haven't been able to reproduce it (assuming I'm understanding correctly – I didn't see any screen size where the card exceeded the max-width before snapping back to it on a larger screen).
I did wonder whether I'd have a problem with media queries because I can't set a screen width X and then do one query for "<= X" and another for "> X". Like, my image sources for an instance have
max-width: 30remandmin-width: 30.01rem, which feels wrong (there are values between 30rem and 30.01rem!) but I didn't know how else to put it...0
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