FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
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.
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>
Css Code
*
{
box-sizing:border-box;
}.box
{
width:20%;
padding:15px;
float:left;
border:1px solid black;
}
