Question: I have made an image gallery, made up by two rows each with tree images. I've made my site responsive, but for some reason, the images does not resize/adjust according to the screen. I've attached the picture, and as is visible the images does not adjust to the screen. [Screen shot of site](https://i.stack.imgur.com/GjWXb.png)

```css
.image3 {
  height: 300px;
  width: 370px;
  border: 5px solid;
  color: grey;
}
```

```html
<div class="wrapper">
  <div class="row">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
    <img src="img/static1.squarespace2.jpg" alt="Iphone" class="image3">
    <img src="img/apple-iphone-8.jpg" alt="Iphone" class="image3"> 
  </div>
  <div class="row">
    <img src="img/iphone-8-concept.jpg" alt="Iphone" class="image3">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3">
  </div>
</div>
```

Answer: 
The image does not resize because you gave them a absolute width. If you give the element a `max-width` and `max-height` of 100% it should be responsive. So like this: 

```css
.image3 {
  max-height: 100%;
  max-width: 100%;
  border-style: solid;
  border-width: 5px;
  color: grey;
}
```

```html
<div class="row">
  <div class="wrapper">
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />
    <img src="img/static1.squarespace2.jpg" alt="Iphone" class="image3" />
    <img src="img/apple-iphone-8.jpg" alt="Iphone" class="image3" /> 
  </div>

  <div class="row">

    <img src="img/iphone-8-concept.jpg" alt="Iphone" class="image3" />
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" />

  </div>
```

Pixels are not responsive to the screen's size

**Note: See response from MarioZ below**
use this code. here i used bootstrap...
copy whole code.. and save as page.html
then check. 

```
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 <div class="row">
  <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
  <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
 </div>  

  <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
  <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
  </div>

   <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
     <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive"> 
  </div>

</div>

  <div class="row">
    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
      <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
  </div>

    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
     <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
  </div>

    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
    <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
   </div>
  </div>
  </div> 

  </body>
 </html>

```