Basic eBay Design Series 2013 Part 5 Cross sell & Shrinking Grid

I wanted to add some swatches to one of my listings. Swatches are just blocks of colour so I want them to SHRINK and not stack with mobile.

So I am going to give you one patterns to use for a cross sell or swatch images area.

Lets start with how it LOOKS:

Desktop:

swatches

 

eBay App:

swatch images

Now I will give you a pattern for a 3×1 row that can be repeated.

The CSS:

.crosspromo {clear: both;padding: 0px;margin: 0px; text-align:center;}
.crosspromo img {width:60%;height: auto;}
.crosspromo p {text-align:center;}
.column {display:block;float:left;margin: 1% 0 1% 1.6%;}
.column:first-child {margin-left: 0;}
.box {width: 32.2%;}
.row:before,.row:after {content:"";display:table;}
.row:after {clear:both;}The HTML:

The HTML:

<div class="crosspromo row">
<div class="column box">
<img alt="" src="http://geishaface.co.uk//ebay/atlantic.jpg" /><p>Atlantic</p>
</div><!--column box-->
<div class="column box">
<img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" /><p>Highlight</p>
</div><!--column box-->
<div class="column box">
<img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" /><p>Juicy Melons</p>
</div><!--column box-->
</div><!--crosspromo grid-->

Currently my crosspromo images are only 60% width, however – you can put any percentage here depending on style AND repeat this section. This methodology can also be used to create a grid for an image gallery with one large image at the top then three thumbnails. More on this later.

So you can use this type of format for cross promotion searches on eBay, swatch sections or anything you want to ‘shrink’ and no ‘stack’ to fit.

Current Responsive Template Code and how it looks on Responsivator

Previous Post:

Basic eBay Design Series 2013 Part 4 Responsive Images

Be Sociable, Share!