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**
It seems you're giving a fixed size to your images using `px` units. If you want your images to be responsive, to adapt their size, you need to use relative units. Being the most common:

* Relative to the container: percentaje **%**
* Relative to the container font-size: **em**
* Relative to the root element font-size: **rem**
* Relative to the viewport size: **vw** and **vh** (equivalent to 1% of
the viewport measure)

You should wrap each image in an individual div `class:wrapper` and give the div a relative width.

```css
html,body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

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

.row {
  width:100%;
}

.wrapper {
  width: 33.33%;
  float:left;
}
```

```html
<div class="row">
  <div class="wrapper">
    <img src="https://placeimg.com/80/80/any" alt="Iphone" class="image3" />
  </div>
  <div class="wrapper">
    <img src="https://placeimg.com/120/120/any" alt="Iphone" class="image3" />
  </div>
  <div class="wrapper">
    <img src="https://placeimg.com/100/100/any" alt="Iphone" class="image3" />
  </div>
</div>

<div class="row">
  <div class="wrapper">
    <img src="https://placeimg.com/80/80/any" alt="Iphone" class="image3" />
  </div>
  <div class="wrapper">
    <img src="https://placeimg.com/120/120/any" alt="Iphone" class="image3" />
  </div>
  <div class="wrapper">
    <img src="https://placeimg.com/100/100/any" alt="Iphone" class="image3" />
  </div>
</div>
```

Maybe it's a good idea to use css **flexbox** or **grid** too.