Hello
This looks quite good except is broken on mobile landscape because you’ve used height instead of min-height (with the calc off viewport height). That’s easy to fix 😊
Other issues
- html semantics is lacking on this. As well as the missing
mainlandmark flagged in the report, you should never have text in a span/div alone. A heading tag would be most appropriate for victors name, for example - with alt text you never need to say “image of”. It’s already on an image element so users know it’s an image. Just victors name will be fine in that case.
I hope that helps
Marked as helpful
@mburch110
Posted
@grace-snow Thank you, I take my notes.
Juggling around the two svg images turned out to be a little nightmare. They always seem to do what they want. It's hard to make them work on different resolutions.
@vanzasetia
Posted
@mburch110 I would recommend using CSS background properties to handle those SVGs. You can copy this background-position code.
background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw), left calc(40vw + 25%) top calc(72vh - 10vw);
That code is coming from the Apple Pie Giraffe solution on this challange.
Marked as helpful
I also did this solution if you want to check mine out. I used pseudo elements for the circles as I find them easier to size and position
