left align images - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

February 23, 2012 at 11:30 am #36802

Member

Hey Guys

Im trying to left align the images on a mobile site. In dreamweaver and previewing in browser it works but when i upload to server on phone the images align to the bottom of one another instead of left justified and wrapping

CSS is as follows:

/* CSS Reset

/*

*/



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }



.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac */ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */



/* General Setup

/*

*/

html{ height:100%;}

body{

font-family:Arial, Helvetica, sans-serif;

padding:0;

font-size:12px;

margin:0;

color: #333333;

background-color:#FFFFFF;

}

.home{height:100%;}

.homeiphone{height:116.85%;}



body#page{height:auto;}



/* Structure

/*

*/

#container{ width:640px; height:100%; margin:auto; position:relative;}

#pagecontainer{width:640px; height:auto; padding:0px 0 0px 0; margin:auto; background-color:#FFF no-repeat center top #cacaca; position:relative;}

#pagecontainer img {

display: block;

max-width: auto;

height: auto;

margin:-1px;

vertical-align: bottom;

float: left;

}



/* CSS Media Queries

/*

*/

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

#container{width:100%; height:100%; padding:0 0 0 0; margin:0 0 0 0;}

#pagecontainer{width:100%; height:100%; padding:0 0 0 0; margin:0 0 0 0;}

#bottom_nav{ width:100%;}

.icons_nav .slides li a{ float:left; margin:0 0 0 0;padding:0 0 0 0; font-size:12px; color:#FFFFFF; text-align:center; line-height:20px; width:19.2%;}

}