Order Summary Component using html and css

Community feedback

• 

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  To fix the background image issue make these changes

      background-size: contain; /* add this line */
  /*     background-position: -190px -400px; */ /* remove this line */
  

  As for you problem with the width on smaller screen you can use media query to fix this

  @media only screen and (max-width: 450px) {
      .container {
          max-width: 370px;
          /* the image is not going to change, because it is styled in the html */
      }
  }
  

  Why did you styled the image in the html file? Avoid doing this, for style use css.

  Marked as helpful

  0

  ---

  

  Fadilano•70

  @FadilanoPosted about 1 year ago

  @hitmorecode thank you for your response, i fixed the background image and why i styled the image in html is because i cant style the svg file in css, i did try to copy paste the svg direct to html and give the class and styled in css, and its still not responsive, the size of the image still not getting smaller, i wonder if you can help me with this problem

  0

  

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  @Fadilano I did this and it works

  /* create a div and add the image inside the div */
  <div class="svg-img">
    <img src="images/illustration-hero.svg" alt="party">
  </div>
  

  .svg-img {
      height: auto;
  }
  
  .svg-img img {
      width: 100%;
      height: 100%;
  }
  
  @media only screen and (max-width: 450px) {
      .container {
          max-width: 370px;
      }
  }
  

  With this it should be responsive

  Marked as helpful

  0

  

  Fadilano•70

  @FadilanoPosted about 1 year ago

  thank you very much it helped me so much@hitmorecode

  0