user6362236 user6362236 - 5 months ago 16
CSS Question

Responsive image with description

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?

enter image description here
enter image description here

Answer

You can using @media query of CSS to detect mobile. Add below code into style:

@media screen and (max-width: 640px) {

  div.img {
    width: 100%;
  }

  div.img img {
    width: 35%;
    float: left;
  }

  div.desc {
    width: 65%;
    box-sizing: border-box;
    float: left;
  }

}

And add meta viewport tag into head:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, shrink-to-fit=no">

I tried and it worked well.