Hi @bdal90
Great job completing this challenge
I took a look at your code in chrome dev tools and experimented with the background-image.
I found by removing the
background-size: contain;
&
background-position: 0 3rem;
on the @media (min-width: 375px) body {} class,
the background no longer shrinks in height when the screen width is wider than 375px.
I hope this helps
@bdal90
Posted
Hi Dean,
Thanks a lot for checking it out! Yes, you are right, however, if you check the full screen size, you'll notice that the image is not wide enough to cover the whole viewport width (that's why I opted for the background-size: contain solution, but then it produces this weird effect I've just explained).... :/
Hi @bdal90,
Ah ok, I haven't tested it wider than 1440px, how wide are you going?
@bdal90
Posted
Hi Dean,
Ummm, no idea. :D It's a regular laptop size, nothing special, but if I do it the way you suggested, it leaves a little margin on both sides.... :/
@bdal90 it might be something to do with the svg being rendered as a background-image, perhaps if it is used as a <svg></svg> instead, it will continue to scale to how ever big you'd like it to be, but that will require changing a few things with the layout... docs
