@Alex-Archer-I
Posted
Hi!
I like your code - to add listener to DOMContentLoaded event is a new approach for me. It's cool =)
To fix your background issue you can use background-size: contain; instead of cover.
I recommend you to replace your .handler_icon with button element - it'll improve semantics of the layout. Also add hover effect and cursor: pointer property for each clickable element for better user experience.
Oh, and I see that body styles in your css rules repeated in the media queries except padding - that isn't necessary as you can only specify properties that changes.
Well, good work, keep doing =)
Marked as helpful
@MDEGORRE
Posted
@Alex-Archer-I
Thank you for your advices however the background-image did not take full width with contain. I guess because of the width of the svg set to 1440, it could not take full width on my larger screen. I added a preserveAspectRatio="none" on the svg and background-size: 100% instead. 🤔
@Alex-Archer-I
Posted
@MDEGORRE
Oh, I didn't think about big screens at all! It seems you found a more neat solution. I wonder whether it'll work just with background-size: 100%.
Sorry for not-so-helpfull advice and thanks for sharing =)
