Want to display images centered using responsive layout

[cgacfox]

I have a site I am working on for a client. I am using Skeleton for the responsive layout. There are two images in the footer area that in larger browsers float left and right. On smaller screens I want them to be aligned center under the other content.

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
			photo_one  {
				float: none;

			}
			photo_two  {
				float: none;
			}

		
		}

The code above does not do what I want. What do I need to put in order for this to work? Thanks.

[ralph.m]

Are "photo_one" and "photo_two" classes or IDs? You don't say in your code. You either need a dot before each or a #. If that doesn't help, we need to see your HTML too.

[cgacfox]

Oops sorry....they are classes. So I would use a . I did that and it worked with the smallest width. I can't get it to work with the width already mentioned. They still float left and right but are staggered.

    <div class="band footer">
        <footer class="container main">
            <div class="sixteen columns">
                <p class="photo_one"><img src="images/1929statecapitalgypsyrunsml.jpg"</p>
                <p class="photo_two"><img src="images/1930copysml.jpg"</p>
            </div><!--end sixteen--> 
        </footer><!-- container --> 
    </div><!--end band-->

[cgacfox]

What I don't understand is that it works with this code.

	@media only screen and (min-width: 480px) and (max-width: 767px) {
img {
	display: none;
}
header h1.logo {
	width: 417px;
	height: 50px;
	display: block;
	background-image: url(../images/sml_logo.png);
	background-repeat: no-repeat;
	font: 0/0 a;/*use the next 3 lines instead of text-indent: -9999px*/
	text-shadow: none;
	color: transparent;
	background-position: 0 0;
}
body {
	background: #000;
}
.photo_one {
	margin-top: 7px;
	display: block;
}.photo_two {
	margin-top: 7px;
	display: block;
}
}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
img {
	display: none;
}
header h1.logo {
	width: 321px;
	height: 32px;
	display: block;
	background-image: url(../images/sml_logo1.png);
	background-repeat: no-repeat;
	font: 0/0 a;/*use the next 3 lines instead of text-indent: -9999px*/
	text-shadow: none;
	color: transparent;
	background-position: 0 0;
}
body {
	background: #000;
}
.photo_one {
	margin-top: 7px;
	display: block;
}
.photo_two {
	margin-top: 7px;
	display: block;
}
}

The images stack on top of one another and look great. It is only the max-width of 767px that are messed up.

[cgacfox]

I have the site up for anyone to look at and see what is happening.

http://foxdenwebsolutions.com/29gypsyrun/index.html

[ronpat]

This addresses the two wide images at the bottom of the page.

Instead of floating the image containers left and right, try setting them to display:inline-block. The images will remain centered whatever the width.

layout.css, Line 179:

.photo_one {
    float: left;
    display:inline-block;
}
.photo_two {
    float: right;
    display:inline-block;
}

[ralph.m]

What I don't understand is that it works with this code.

It works because, at that width, you set the image container to the width of the images (more or less) so that the images have no option but to sit vertically.

In the scenario where they are staggered, the container is some 748px wide, so the images move as far left and right as they can within that.

[cgacfox]

Thank you, ronpat. This worked perfectly! Now on to the second page, which will hold the images and the Paypal gateway info.

[ronpat]

You are very welcome. Glad to know it worked. The link to your site was most helpful
Thanks for the feedback!