CODEWITHSUNDEEP
cssimagegrid
user1015367
user1015367

Reputation: 111

Three images horizontal w/ responsive design

I need instruction on how to create a simple image grid with fluid resizing. I would like to place three (about 300px) square images on my front page that span the width and respond when the window is resized or if viewed on. If screen size is smaller, the three images will stay horizontal, but shrink. When viewed on a phone, the three images will stack with the first being at the top, the middle one second and the last one third.

I can get the images to show up, but I'm having trouble with CSS.

<div id="content" class="col-full">

 <div id="grid">

    <a href="http://mywebsite.com/info/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/about/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/contact/"><img src="http://lorempixel.com/320/320"></a>

    </div>

<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>

Any advice is appreciated for this NOOB. :-)

Upvotes: 1

Views: 2412

Answers (1)

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

Try "text-align: center;" on container and "display: inline-block;" on images.

Must do the thing.

Example: http://jsfiddle.net/SvR6Z/1/

EDIT: Added ways to shrink screen.

To change images position on the page it response to window width you can do following:

  1. Specify tags with relative sizes. For example with "width: 80%;" page width will always be 80% of the parent container (if the parent container is body, then it will be 80% of windows width). By default block-level element have width 100%; If you don't want it to be more than some value you can specify max-width property to do so. Element with: "width: 100%; max-width: 906px;" will always have width of 960px or less, no matter of window size.

  2. If you want to have more control to the grid and decoration for mobile viewers (hede some elements for example) oyu can use css media queries ( read more about them here: http://css-tricks.com/6731-css-media-queries/ ) to do so. For example if you link css to page this way it will be working only when window width is more than 701px and less then 900px: 

    <link rel='stylesheet' media='screen
      and (min-width: 701px) 
      and (max-width: 900px)' href='css/medium.css' />

Upvotes: 2

Related Questions