CSS Responsive Image Gallery

We will use CSS media queries to create a responsive image gallery. It changes the shape, size, position etc. of the images in the image gallery, depending on screen sizes.

Responsive Image Gallery

This example use media queries to re-arrange the images on different screen sizes.

• for screens larger than 700px wide, it will show four images side by side.
• for screens smaller than 700px, it will show two images side by side. 
• For screens smaller than 500px, the images will stack vertically (100%).

media queries are CSS styles, that is applied to the same elements, depending on screen sizes.

Resize the Browser to see the effect.

Responsive Image Gallery

Resize the browser window to see the effect.

Add a description of the image here

Add a description of the image here

Add a description of the image here

Add a description of the image here

This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).

Example

<style>
div.gallery {
border: 1px solid #ccc;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}

* {
box-sizing: border-box;
}

.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}

.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lake.jpg">
<img src="img_lake.jpg" alt="Lake" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="clearfix"></div>

Example Explained

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> - This Sets the viewport to the same as device width.
• @media screen and (max-width: 700px)
  • @media screen - This select screen as its input i.e. the change in the width of the screen will use this media query.
  • and (max-width: 700px) - This select screen with its width less than 700px as its input i.e. the change in the width of the screen will use this media query.
• @media screen and (max-width: 500px)
  • @media screen - This select screen as its input i.e. the change in the width of the screen will use this media query.
  • and (max-width: 500px) - This select screen with its width less than 500px as its input i.e. the change in the width of the screen will use this media query.
• Initially, the width of the <div>element with class responsive (Single Image in Image Gallery) will be 24.99%.
• On the change of width of the screen, if the size of screen is less than 700px, <div>element with class responsive will be 49.99%.
• On the change of width of the screen, if the size of screen is less than 500px, <div>element with class responsive will be 100%.