Hi 👋 @gmagnenat,
Congrats again on a great solution. 👏 I love your use of Sass, and your overall implementation of the hero section and the overflowing images was great.
I did notice a slight issue with how you implemented the centering of your hero image that you might want to consider a little further. Specifically, when you are in the mobile or tablet view and using the single hero image, you have the following styles set:
.hero {
&__illustration__image {
max-width: calc(100% + 4rem);
margin-left: -2rem;
@media screen and (min-width: 62em) {
max-width: 100%;
margin-left: 0;
}
}
}
This works well when the viewport/container width is less than the width of the image (minus that extra margin), but then is off-center when the viewport/container width gets larger than that (and then before you switch 62em or 992px). In my solution to this challenge, I used absolute positioning, but I like your solution much better since the hero image resizes fluidly at different viewport sizes. So, I thought about a possible adaptation to your solution, and came up with this clamp function that utilizes your -2rem as the max value for the left margin, 0 as the min value, and then dynamically calculates a more appropriate value that will center the image when the viewport is in those awkward middle viewport sizes. Here it is:
margin-left: clamp(-2rem, calc((820px - 100vw) / -2), 0px);
I'm interested to know what you think of this idea 🤔, and if it works for what you're trying to do in this case.
Happy coding. 💻
Eli
