Quote:
Originally Posted by Lynne
Can we get a link to view the problem? Images really don't help with CSS issues.
|
Not live yet. Still on localhost.
Code:
<!DOCTYPE HTML>
<html lang="en-US">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive Tiled Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!-- Enable media queries for old IE -->
[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
[endif]
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: left;
position: relative;
width: 22%;
padding-bottom: 20%;
}
.boxInner {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 100%;
}
<!--.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: -50px;
background: #000;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}-->
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 100%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 50%;
}
}
@media only screen and (max-width : 800px) and (min-width : 400px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}
</style>
<div class="wrap">
<!-- Define all of the tiles: -->
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg">
<!--<div class="titleBox">Poster</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
<!-- <div class="titleBox">An old greenhouse</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
<!-- <div class="titleBox">Purple wildflowers</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
<!-- <div class="titleBox">A birdfeeder</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
<!-- <div class="titleBox">Crocus close-up</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
<!-- <div class="titleBox">The garden shop</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
<!-- <div class="titleBox">Spring daffodils</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
<!-- <div class="titleBox">Iris along the path</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
<!-- <div class="titleBox">The garden blueprint</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
<!-- <div class="titleBox">The patio</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
<!-- <div class="titleBox">Bumble bee collecting nectar</div>-->
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
<!-- <div class="titleBox">Winding garden path</div>-->
</div>
</div>
</div>
<!-- /#wrap -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// See if this is a touch device
if ('ontouchstart' in window)
{
// Set the correct [touchscreen] body class
$('body').removeClass('no-touch').addClass('touch');
// Add the touch toggle to show text when tapped
$('div.boxInner img').click(function(){
$(this).closest('.boxInner').toggleClass('touchFocus');
});
}
});
</script>
Easy enough to replicate. Just drop the code in a HTML module.
Thank you. . .
More Information