I have an image gallery in my website. All images have description.
I want to know if there is any way to make this images responsive and when screen is in mobile size description move to the left of the image.
As you see in normal mode description,
1 List item is under the image.
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Any Idea?
Aucun commentaire:
Enregistrer un commentaire