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**
Why would they?

You can use

```
max-width: 100%; /* or 33% or whatever you need */

```

to let it shrink when the screen has less width, but right now it will always be the size you specified.

---

Also "responsiveness" mainly refers to having different layouts for different screen widths, which results in optimized layouts for both mobile and desktop. Having three images next to each other doesn't seem very responsive. Rather I would decrease the number of images in each row.

Like this:

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

```html
<div class="row">
  <div class="wrapper">
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" /> 
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" />
  </div>
</div>
```