How can I make my columns responsive for all screen sizes? Currently, I have set the width to 20% for each column, but I would like it to adjust accordingly. Here is a link to the fiddle. Any help on making the row responsive with five columns would be greatly appreciated.
HTML
<div class="container"><div class="row">
<div class="grid-five">
<div class="image-thumb">
<figure>
<img src="https://www.w3schools.com/html/pic_mountain.jpg">
</figure>
</div>
</div>
<div class="grid-five">
<div class="image-thumb">
<figure>
<img src="https://www.w3schools.com/html/pic_mountain.jpg">
</figure>
<i class="icon-close sprite"></i>
</div>
</div>
<div class="grid-five">
<div class="image-thumb overlay">
<figure>
<img src="https://www.w3schools.com/html/pic_mountain.jpg" >
</figure>
</div>
</div>
<div class="grid-five">
<div class="image-thumb overlay">
<figure>
<img src="https://www.w3schools.com/html/pic_mountain.jpg" >
</figure>
</div>
</div>
<div class="grid-five">
<div class="image-thumb overlay">
<figure>
<img src="https://www.w3schools.com/html/pic_mountain.jpg" >
</figure>
</div>
</div>
</div>
</div>
CSS
.add_more_images .grid-five{
width:20%;
}