Make Images Mobile Responsive Lesson Image Width?

HTML-CSS
1

Do this, and the image should perfectly fit the width of your page.

Could someone provide more information on how this works. The image did not fill the width of the page completely there was some whitespace. Is this based on default padding and margin values for items or how does it work?

Thank you!
Jason

2

It seems to be a default value of the ‘container-fluid’ class, not a problem of the ‘img-responsive’ class ( img-fluid in BS4 ). Adding a ruleset like the one below

  .test {
    padding: 0px;
  }

and adding the class ‘test’ to the div which already has the ‘container-fluid’ class will match the whole width
( almost…you would add the body selector to the above ruleset to let the image ‘touching’ the phone border)

3

Thank you very much :slight_smile:

Jason

1 Like