responsive image grid?

**mlegg** · 09-23-2014, 06:14 PM

I setup a grid design for a page that will get more photos eventually. http://ahepa215.org/photo-grid.html

The design is responsive but the images on that page are not. How can I change this to make them responsive?
thanks

HTML

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="language" content="english">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<META NAME="description" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION Chapter 215. The Portsmouth Chapter #215 of the Order of AHEPA was founded on March 21, 1929, at which time the first meeting was held. On March 24, 1929 thirty four residents of Portsmouth and Dover were initiated into the Order. We are a part of the District Lodge 9 that encompasses the Maine, New Hampshire and Vermont AHEPA chapters.">
  <META NAME="keywords" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION, Chapter 215, Portsmouth NH, Portsmouth, NH, Maine, ME, New Hamptshire, Vermonth, VT, EVENTS, NEWS, PROGRAMS, ISSUES, EDUCATIONAL FOUNDATION, CONTACTS">
<title>AHEPA 215 Portsmouth, NH</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400">
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
<!-- Start css3menu.com HEAD section -->
	<link rel="stylesheet" href="ahepa_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
	<!-- End css3menu.com HEAD section -->
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 32px; height: 32px; overflow: hidden; cursor: pointer}
</style>
</head>
<body>
<div id="container">
<img id="logo" src="images/Ahepa215-banner.jpg" alt="AHEPA 215 logo">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label>	<li class="topfirst"><a href="index.html" title="Home" style="height:25px;line-height:25px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABNklEQVRIie3TIU4DURSF4QpkBQKSOhCVLKAOVAOqmyAoGpYwBk/CBpBIXCtI2EQJoiQgkNi6JnyI3qGPR2k6MAQEJ7nJ5J17/5N5c6fRqCA00awyUwXexiiqXTf8ELfmusVhHeBNnGLioybhbX4V3sJ1Bn2MSnWNVlV4B08ZaIiNqGHmPaGzKvwY0wxQYK3congusp4pjpeBm7jMhp6xH/6O+RbtxNl+9KS6lK8yuhhkjVfYDb+PceKN0Q9vL3pTDdAt4Ue4S8wXnGHLbPfPfa7z6NmOmZfEu8NRIxt4wEkEHyx4q0Ua4CBmToLxpjTgBr3kSu5XgJe6N7+yXrDeBQyxbvahLyqAc10EYz2YGiiSjz36BrzUKOG9scuDWrTsX/i1gOKTqiegrv7/gL8RUCyquvp/RK9oMw1GwfTPzgAAAABJRU5ErkJggg==" alt=""/>&nbsp</a></li>
	<li class="topmenu"><a href="#" style="height:25px;line-height:25px;"><span>About</span></a>
	<ul>
		<li><a href="chapter215.html" title="Chapter 215"><span>Chapter 215</span></a>
		<ul>
			<li><a href="brothers.html" title="Brothers">Brothers</a></li>
		</ul></li>
		<li><a href="ahepa.html" title="AHEPA">AHEPA</a></li>
	</ul></li>
	<li class="topmenu"><a href="scholarships.html" title="Scholarships" style="height:25px;line-height:25px;">Scholarships</a></li>
	<li class="topmenu"><a href="photo.html" title="Rates" style="height:25px;line-height:25px;">Photos</a></li>
	<li class="topmenu"><a href="join.html" title="Join" style="height:25px;line-height:25px;">Join</a></li>
	<li class="topmenu"><a href="calendar.html" title="Calendar" style="height:25px;line-height:25px;">Calendar</a></li>
	<li class="toplast"><a href="contact.html" title="Contact" style="height:25px;line-height:25px;">Contact</a></li>
</ul>
<!-- End css3menu.com BODY section -->
<div id="content">
<h1>Photos</h1>
  <div id="ctr-img">  
    <img src="images/leadership-sm.jpg" alt="leadership conference" />  
    <img src="images/MSD-sm.jpg" alt="Market Square Day" />
 </div>
<p>Click the above images to see a slideshow with more images from the above events.</p>
<div style="clear:both;"></div>
</div></div></div></div>
<div id="footer">Copyright © AHEPA 215 &nbsp;&nbsp; <a href="mailto:ahepa215@gmail.com">ahepa215@gmail.com</a></div>
</body></html>

**mlegg** · 09-23-2014, 06:16 PM

the css part in question is id="ctr-img"

Code:

body {

    margin:0;

    background-image:url(images/greekkey.gif);

    font-family:'Open Sans',sans-serif;

    font-size:100%;

    color:#036;

 }

ul {

    padding:0;

    margin:0;

    list-style-type:none;

 }

a {

    text-decoration:none;

 }

#container {

    width:90%;

    margin:auto;

    background-color:#fff;    

 }

#logo {

    display:block;

    width:100%;

 }



#content {

    clear:both;

    position:relative;

    padding:1.5em 5%;

 }

#ctr-img {

    display:block;

    width:100%;

    text-align:center;

}

.arrow-down {

	width: 0; 

	height: 0; 

	border-left: 20px solid transparent;

	border-right: 20px solid transparent;

	

	border-top: 20px solid #000;

}

h2 {

    clear:both;

    text-align:center;

 }

audio {

    visibility:hidden; 

    height:0; 

    width:0;

 }

#pauseplay {

    float:right; 

    width:32px; 

    height:32px; 

    cursor:pointer;

 }

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

body {

    font-size:90%;

 }

#nav li {

    height:90%;

 }

}

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

body {

    font-size:80%;

 }

#nav li {

    height:80%;

 }

}

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

body {

    font-size:70%;

 }

#nav li{

    height:70%;

 }

}

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

body {

    font-size:60%;

 }

#nav li {

    height:60%;

 }

}

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

#nav ul {

    position:static;

    border:0;

    box-shadow:none;

 }

#nav li {

    float:none;

    width:100%;

 }

#nav a,#nav ul a{

    text-align:left;

    padding:0 0 0 1em;

 }

}



.innerBox {

  background-color : #ffffff;

  background-repeat : repeat-y;

  padding-top: 1em;

  padding-left: 1em;

  padding-right: 1em;

  padding-bottom : 1em;

}

#img-ctr {

    text-align: center;

}

#left {

    float: left;

    width: 32%;

    padding:5px;

}



#middle { 

    float: left;

    width: 32%;

    padding:5px;

}



#right {

    float:left;

    width:32%;

    padding:5px;

}



.columns {

    width:100%;

}

.left{

    float:left;

    width:45%;    

 }

.right {

    margin-left:45%;

 }

.clear {

    clear:both;

 }

.google-maps {

    position: relative;

    padding-bottom: 75%; // This is the aspect ratio

    height: 0;

    overflow: hidden;

}

.google-maps iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100% !important;

    height: 100% !important;

}

#map {

    height: 100%;

 }

#brothers {

    margin:auto;

    text-align:center;

}

#social {

    margin:auto;

    text-align:center;

}



#footer {

    background:#7DA3E4;

    width:90%;

    margin:auto;

    text-align:center;

    font-family:sans-serif;

    font-size:80%;

    color:#fff;

    padding:0.5em 0;

 }

#footer a {

    color:#fff;

 }

/* Smartphones (portrait and landscape) ----------- */

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) {

/* Styles */

}



/* Smartphones (landscape) ----------- */

@media only screen 

and (min-width : 321px) {

/* Styles */

}



/* Smartphones (portrait) ----------- */

@media only screen 

and (max-width : 320px) {

/* Styles */

}



/* iPads (portrait and landscape) ----------- */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) {

/* Styles */

}



/* iPads (landscape) ----------- */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : landscape) {

/* Styles */

}



/* iPads (portrait) ----------- */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : portrait) {

/* Styles */

}



/* Desktops and laptops ----------- */

@media only screen 

and (min-width : 1224px) {

/* Styles */

}



/* Large screens ----------- */

@media only screen 

and (min-width : 1824px) {

/* Styles */

}



/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}

**Beverleyh** · 09-23-2014, 08:20 PM

Try the 1st method detailed here http://www.dynamicdrive.com/forums/e...ponsive-Design

**mlegg** · 09-23-2014, 09:17 PM

Thanks Beverly. I used the 1st option. Now, how can I get the margin space to the left, in between the images and to the right to be equal?

oop, the new page is here http://ahepa215.org/photos.html

the css is here http://ahepa215.org/styles.css

**Beverleyh** · 09-24-2014, 05:28 AM

I'm on mobile at the moment but the easiest way to get the margins the same is to set an equal value on each of the 4 sides - if you want the distance to be 10px between, set it to 5px so that when 2 images are sat up against each other, the combined margin between each image will total 10px.

This will give you a 5px margin on the outermost images in the grid, which might be acceptable to you, but if not, you can put the images inside a container div and put a (-5px) negative margin on it. This has the effect of making the container div 5px bigger in all directions so that it can accommodate the extra 5px margin of the outermost images, allowing the right and left edges of the actual images to sit flush with the rest of your content.

Hope that makes sense.

**Beverleyh** · 09-24-2014, 09:15 AM

I'm at a desk now so I've knocked together a demo http://fofwebdesign.co.uk/template/_...id-img-rwd.htm

(It's using method 2 from my 3 fave go-to responsive image techniques: http://www.dynamicdrive.com/forums/e...ponsive-Design)

Reduce the browser window;

- the wider the screen, the more images appear in a row
- images scale fluidly within width boundaries (i.e. media query breakpoints)

There are calculations in the CSS that make the images evenly occupy a full row; All measures are in percentages so for a perfect result, the combined image widths (of all the images on a row), plus their left and right margins, need to equal 100. Here's the calculation for that;
width = (100 / images per row) - ( margin x 2 )

This demo uses squares, but you can easily use rectangles by changing the padding-bottom:100%; value;
75% = 4:3 aspect ratio
56.25% = 16:9 aspect ratio

Hope it helps

**Beverleyh** · 09-24-2014, 10:30 AM

If you're anything like me, you probably hate calculations, right? (you spend hours working something out only to forget it again when you next change your layout)

So, to be kind to our brains, I've just added a simple calculator to the bottom of the demo page

**molendijk** · 09-24-2014, 04:01 PM

Can't we obtain the same thing by just doing something like this:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>&nbsp;</title>
<style>
.test_div {position: relative; float: left; width: 15%; min-width: 100px; margin: 15px; }
.test_img {width: 100%; }
</style>
</head>
<body>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<!-- etc. -->

</body>
</html>

I know the collection is not centered, but everything scales well.

**Beverleyh** · 09-24-2014, 04:57 PM

Yes, it's an option, but I think I prefer the completely fluid scaling effect more;

Arie's demo: http://fofwebdesign.co.uk/template/_...g/grid-img.htm

Beverley's demo: http://fofwebdesign.co.uk/template/_...id-img-rwd.htm

I think it just comes down to the degree of predictability you want over the final look in an unknown environment ("unknown environment" referring to the plethora of browser/screen widths rather than website layout)