Share |
<style> #staff-table { display: flex; flex-wrap: wrap; justify-content: center; } #staff-table-column1 { width: 48%; float: left; } #staff-table-column2 { width: 48%; float: right; } .person { position: relative; display: inline-block; overflow: hidden; height: 380px; width: 100%; margin-bottom: 15px; } .caption { width: 82%; position: absolute; left: 0; } .caption h2 { font-size: 18px; } .person img { width: 90%; height: 250px; max-width: 250px; } @media (max-width: 500px) { #staff-table-column1 { width: 100%; float: left; text-align: center; } #staff-table-column2 { width: 100%; float: right; text-align: center; } .person img { width: 100%; } .caption { position: absolute; width: 95%; } .caption h2 { font-size: 16px; font-weight: 700; } } </style> <div id="staff-table"> <div id="staff-table-column1"> <div class="person" data-id="1"> <img src="http://merwin.website/resource/resmgr/imageplaceholder.jpg"> <div class="caption"> <h2>Janet Smith</h2> <div class="position">Serials Librarian</div> <div class="details">(607) 123-1111<br> jsmith@blah.edu<br> <a href="#">More about Janet</a></div> </div> </div> <div class="person"> <img src="http://merwin.website/resource/resmgr/imageplaceholder.jpg"> <div class="caption"> <h2>Michael Sweatervest</h2> <div class="position">Social, Natural, and Anti-social Sciences Librarian</div> <div class="details">(607) 123-2222<br> msweat@blah.edu<br> <a href="#">More about Michael</a></div> </div> </div> <div class="person"> <img src="http://merwin.website/resource/resmgr/imageplaceholder.jpg"> <div class="caption"> <h2>Katherine Borgia</h2> <div class="position">Humanities Librarian</div> <div class="details">(607) 123-3333<br> kborg@blah.edu<br> <a href="#">More about Katherine</a></div> </div> </div> </div> <div id="staff-table-column2"> <div class="person"> <img src="http://merwin.website/resource/resmgr/imageplaceholder.jpg"> <div class="caption"> <h2>Michael Sweatervest</h2> <div class="position">Social Sciences Librarian</div> <div class="details">(607) 123-2222<br> msweat@blah.edu<br> <a href="#">More about Michael</a></div> </div> </div> <div class="person"> <img src="http://merwin.website/resource/resmgr/imageplaceholder.jpg"> <div class="caption"> <h2>Katherine Borgia</h2> <div class="position">Humanities Librarian</div> <div class="details">(607) 123-3333<br> kborg@blah.edu<br> <a href="#">More about Katherine</a></div> </div> </div> <div class="person"> <img src="http://merwin.website/resource/resmgr/imageplaceholder.jpg"> <div class="caption"> <h2>Janet Smith</h2> <div class="position">Serials Librarian</div> <div class="details">(607) 123-1111<br> smith@blah.edu<br> <a href="#">More about Janet</a></div> </div> </div> </div> </div>