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.
@AayushGuptaP1
Posted
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%;
}
@mohammedlahboub
Posted
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
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
