I have a web page for a photo gallery with twelve photos contained in a 3x4 table. When the width of the browser window is resized down to a certain point, I would like the table to “collapse” into one column with twelve rows – basically one column of twelve photos rather than three columns of four each. How can I do this with CSS?
Here is the HTML of my table just in case it helps:
<table id="gallery">
<tbody>
<tr>
<td><a href="images/gallery_01.jpg" target="_blank"><img class="photo" src="images/gallery_01.jpg" width="280" height="144" alt=""/></a></td>
<td><a href="images/gallery_02.jpg" target="_blank"><img class="photo" src="images/gallery_02.jpg" width="280" height="145" alt=""/></a></td>
<td><a href="images/gallery_09.jpg" target="_blank"><img class="photo" src="images/gallery_09.jpg" width="280" height="127" alt=""/></a></td>
</tr>
<tr>
<td><a href="images/gallery_04.jpg" target="_blank"><img class="photo" src="images/gallery_04.jpg" width="280" height="121" alt=""/></a></td>
<td><a href="images/gallery_06.jpg" target="_blank"><img class="photo" src="images/gallery_06.jpg" width="280" height="123" alt=""/></a></td>
<td><a href="images/gallery_12.jpg" target="_blank"><img class="photo" src="images/gallery_12.jpg" width="280" height="116" alt=""/></a></td>
</tr>
<tr>
<td><a href="images/gallery_07.jpg" target="_blank"><img class="photo" src="images/gallery_07.jpg" width="280" height="153" alt=""/></a></td>
<td><a href="images/gallery_08.jpg" target="_blank"><img class="photo" src="images/gallery_08.jpg" width="280" height="162" alt=""/></a></td>
<td><a href="images/gallery_03.jpg" target="_blank"><img class="photo" src="images/gallery_03.jpg" width="280" height="162" alt=""/></a></td>
</tr>
<tr>
<td><a href="images/gallery_05.jpg" target="_blank"><img class="photo" src="images/gallery_05.jpg" width="280" height="194" alt=""/></a></td>
<td><a href="images/gallery_10.jpg" target="_blank"><img class="photo" src="images/gallery_10.jpg" width="280" height="214" alt=""/></a></td>
<td><a href="images/gallery_11.jpg" target="_blank"><img class="photo" src="images/gallery_11.jpg" width="280" height="224" alt=""/></a></td>
</tr>
</tbody>
</table>
Ray.H
February 21, 2019, 12:50am
2
Don’t use a table, it’s not tabular data, it’s an image gallery.
Flex can lay it out for you and a media query can stack them into blocks.
Something like this if I’m understanding you correctly…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
img {
display:block;
width:100%;
height:auto;
max-width:280px;
margin:0 auto;
}
.wrap > div {
display:flex;
justify-content:center;
align-items:flex-start;
margin:20px 0;
}
.wrap > div div {
flex:0 1 280px;
margin:0 10px;
}
@media all and (max-width: 400px) {
.wrap > div {
display:block;
}
.wrap > div div {
margin:10px 0;
}
}
</style>
</head>
<body>
<div class="wrap">
<div>
<div><a href="images/gallery_01.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x144.jpg" width="280" height="144" alt="img 1"/></a></div>
<div><a href="images/gallery_02.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x145.jpg" width="280" height="145" alt="img 2"/></a></div>
<div><a href="images/gallery_09.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x127.jpg" width="280" height="127" alt="img 3"/></a></div>
</div>
<div>
<div><a href="images/gallery_04.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x121.jpg" width="280" height="121" alt="img 4"/></a></div>
<div><a href="images/gallery_06.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x123.jpg" width="280" height="123" alt="img 5"/></a></div>
<div><a href="images/gallery_12.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x116.jpg" width="280" height="116" alt="img 6"/></a></div>
</div>
<div>
<div><a href="images/gallery_07.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x153.jpg" width="280" height="153" alt="img 7"/></a></div>
<div><a href="images/gallery_08.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x162.jpg" width="280" height="162" alt="img 8"/></a></div>
<div><a href="images/gallery_03.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x162.jpg" width="280" height="162" alt="img 9"/></a></div>
</div>
<div>
<div><a href="images/gallery_05.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x194.jpg" width="280" height="194" alt="img 10"/></a></div>
<div><a href="images/gallery_10.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x214.jpg" width="280" height="214" alt="img 11"/></a></div>
<div><a href="images/gallery_11.jpg" target="_blank"><img class="photo" src="https://via.placeholder.com/280x224.jpg" width="280" height="224" alt="img 12"/></a></div>
</div>
</div>
</body>
</html>
3 Likes
Hi there Morthian,
I would be inclined to treat the gallery as a list…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
h1 {
font-size: 1.5em;
text-align: center;
text-transform: uppercase;
}
#links {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 55em;
padding: 0.5em;
margin: 0 auto;
border: 1px solid #999;
background-color: #fff;
list-style: none;
}
#links li {
max-width: 17.5em;
}
@media ( max-width: 56em ) {
#links {
width: 19em;
}
}
</style>
</head>
<body>
<h1>gallery links</h1>
<ul id="links">
<li><a href="#"><img src="http://placehold.it/280x144" width="280" height="144" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x145" width="280" height="145" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x127" width="280" height="127" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x121" width="280" height="121" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x123" width="280" height="123" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x116" width="280" height="116" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x153" width="280" height="153" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x153" width="280" height="153" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x162" width="280" height="162" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x194" width="280" height="194" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x214" width="280" height="214" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/280x224" width="280" height="224" alt=""></a></li>
</ul>
</body>
</html>
coothead
3 Likes
system
Closed
May 23, 2019, 8:38am
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.