Design comparison
SolutionDesign
Solution retrospective
I had a lot of difficulty with the svg files, I couldn't leave it the way I wanted with the image taking up 100% of the component's space and I couldn't leave the music icon in the center. I spent hours coding.
Community feedback
- @AayushGuptaP1Posted over 2 years ago
Hey @alephy9, You can use the img tag for the illustration
<img class="order-image" src="images/illustration-hero.svg" alt="illustration of a person enjoying music">
and just set the width property to 100% and you are good to go😊.
img{ width: 100%; }
0 - @mohammedlahboubPosted over 2 years ago
Hi @@alephy9 if you want to use the svg as background you can do this :
body{ background-color: hsl(225, 100%, 94%); **remove it from <main> background-image: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; background-position: center top; background-size: contain; } @media (max-width: 600px) body { background-image: url(./images/pattern-background-mobile.svg); }
hope this will help
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord