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**
If you want an image to be responsive there are 2 main things you need to do:

1. never set both width and height, just set width.
2. don't use pixels to set the width use percentages

In your case you have 3 images so divide 100% in 3 which is about 33%, so give the images the size of 33% (or a little less if the container doesn't have box-sizing: border-box;) and they will adjust nicely.