Basic eBay Design Series 2013 Part 4 – Responsive Images

I said I was keeping it simple and I am. In my template I am incorporating 4 images 400px x 400px in a 2×2 grid under my description.

In the future I might look into a pure css gallery with rollovers that is responsive too. However, for that kind of hard work I am likely to charge!

We have some additions to the CSS:

.gallery {width:90%;max-width:990px;}
.grid {float: left;width: 50%;min-width:280px;}
.pics {padding:5px;}
.pics img {width: 100%;}

Simple stuff and here is our gallery HTML code:

<div id="gallery">
    <div>
      <div>
        <img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg"/>
      </div>
    </div>
    <div>
      <div>
        <img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg" />
      </div>
    </div>
    <div>
      <div>
        <img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg"/>
      </div>
    </div> 
   <div>
      <div>
        <img src="http://kidsontalks.com/wp-content/uploads/2013/03/square.jpg" />
      </div>
    </div>
  </div><!--gallery-->

And the current state of the full code:Responsive eBay Template and you can see the differences due to screen size here: http://dfcb.github.com/Responsivator/?site=kidsontalks.com/wp-content/uploads/2013/03/iki_nail1.html- smaller screens 1 x2 grid, larger screens 2×2 grid.

If you JUST use % widths you can have the 2×2 gridshrinkin the smaller screens, however I have set a min width as I want to be able to see my pictures within the template.

So what ELSE do we need in a basic listing template. Policies of course! In the next post I will add two floaty sections which will stack for mobile.

Previous post:http://kidsontalks.com/basic-ebay-design-series-2013-part-3-responsive-design-and-ebay/

Be Sociable, Share!