@sofiasmnkSubmitted about 1 month ago
What are you most proud of, and what would you do differently next time?
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.
What challenges did you encounter, and how did you overcome them?
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!
What specific areas of your project would you like help with?
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.
