Responsive with Flexbox

Community feedback

• 

  Aayush Gupta•40

  @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
• 

  Mohammed Lahboub•570

  @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