css

Community feedback

• 

  Mohammed Lahboub•570

  @mohammedlahboubPosted over 2 years ago

  You did well @Salman-41
  To make it responsive : -Replace the img element with a div and set the backgound-image to the img. -Add a Media Query for screens at 400px max-width ( For Mobile Version ) { --Remove the fixed width to 100% on the div and main. --Replace the div background-image with mobile version of the img . --Add flex-direction: columns to stack the image on top of the main element. -- Adjust the borders

  ----------------This the code version--------------------

  div{ width:100% 
         border-radius: 10px 10px 0 0;
         backgound-image: url(../images/image-product-mobile.jpg);
         background-position: center; 
         background-repeat: no-repeat; 
         background-size: cover;  }
  .containner{ flex-direction: columns ;}
  
  main{ border-radius: 0 0 10px 10px ;}
  }
  

  here is my best resource Hope u find this helpful !!

  Marked as helpful

  1

  ---

  

  Muhammad Salman•50

  @Salman-41Posted over 2 years ago

  @mohammedlahboub Thanks, That was helpful!

  1