CODEWITHSUNDEEP
csshtmlrow
Juan Rangel
Juan Rangel

Reputation: 1793

Row of Images Responsive

I have been searching and cannot find a answer. Maybe I am just wording my search wrong but I am having trouble with making this row of images responsive.

http://jsfiddle.net/nunotmp/4W2Bc/

I have added the media query below

@media only screen and (max-width: 960px) {
#teasercenter {
width:100%;
display:inline-block;
}
#teasercenter ul li img {
min-width:100%;
height:auto;
}

}

When resizing the window they do fall under each other but with a large white area and aligned to the left. Is there a way to get then to center as they fall? Maybe the way I structured the html is wrong? Any help would be appreciated.

Upvotes: 2

Views: 1612

Answers (1)

Dion
Dion

Reputation: 3335

I don't exactly know what you want to do, but probably you're looking for display:inline-block;, then the images would be at the center if they are underneath. You just have to make the parent element or body text-align:center; and it should work! Would be something like this: http://jsfiddle.net/4W2Bc/10/

Upvotes: 1

Related Questions