×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Dropdown Navbar using CSS and HTML Easy Image gallery II by CSS 3.0
Responsive Image Gallery - CSS 3.0
1975    Arnab De    15/05/2017

Design a Responsive Image Gallery

Today’s web designing is not limited only for the desktop. All the designers should be very careful about the device in which your website may open. Most of the case users are open the website in the desktop but most advance users open the same site in their tab or mobile sets. But ordinary web pages are cannot scale itself into various devices. We must size all the elements in the page by the ratio of it container.

softetechnologies

Here we create a simple photo gallery. This will open in every device with the same format.

Html Code

<html>
<head>
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="imgGallery.css">
</head>
<body>
<h1>Image Gallery</h1>
<div class="box"><img src="img1.jpg" width="100%"></div>
<div class="box"><img src="img1.jpg" width="100%"></div>
<div class="box"><img src="img1.jpg" width="100%"></div>
<div class="box"><img src="img1.jpg" width="100%"></div>
<div class="box"><img src="img1.jpg" width="100%"></div>

<div class="box"><img src="img1.jpg" width="100%"></div>
<div class="box"><img src="img1.jpg" width="100%"></div>
<div class="box"><img src="img1.jpg" width="100%"></div>
<div class="box"><img src="img1.jpg" width="100%"></div>
<div class="box"><img src="img1.jpg" width="100%"></div>
</body>
</html>

softetechnologies

Css Code

*
{
box-sizing:border-box;
}

.box
{
width:20%;
padding:15px;
float:left;
border:1px solid black;
}

Video Tutorials

Dropdown Navbar using CSS and HTML Easy Image gallery II by CSS 3.0
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
It is no easy task to lead men. But it is easy enough to drive them.
Rabindranath Tagore
744
39.04
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     34343
26/05/2018     31115
28/06/2017     31000
02/08/2017     29004
25/06/2018     26387
15/05/2017     24658
01/08/2017     23608
06/07/2017     23257
21/04/2018     19248
14/07/2017     18573
softetechnologies