Hi Phil,
I've finally found a solution that gives responsive sprite images. I used
InstantSprite to create the image sprite (great tool!) which in my example is 4 images 209px by 89px each, lined up horizontally for a total horizontal width of 836px. I do not use any of the CSS or code that it generates and instead us the CSS and code below.
The example below displays my 4 sprite promo images in bar.tpl just like I had in Ability except now the images are responsive.
CSS:
Quote:
#promo-wrap {
max-width: 836px;
margin-bottom: 0px;
padding: 4px 4px 0px 4px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
#promo-wrap img {max-width: 400%;}
#one {max-width:100%; overflow:hidden; display:inline-block;}
#one img {width:400%;}
#two {max-width:100%; overflow:hidden; display:inline-block;}
#two img {margin-left:-100%; width:400%;}
#three {max-width:100%; overflow:hidden; display:inline-block;}
#three img {margin-left:-200%; width:400%;}
#four {max-width:100%; overflow:hidden; display:inline-block;}
#four img {margin-left:-300%; width:400%;}
|
My promo.tpl code:
Quote:
{capture name=menu}
<div id="promo-wrap">
<a id="one" href="product_one.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>
<div id="promo-wrap">
<a id="two" href="product_two.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>
<div id="promo-wrap">
<a id="three" href="product_three.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>
<div id="promo-wrap">
<a id="four" href="product_four.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>
{/capture}
{include file="customer/menu_dialog_bordered.tpl" title="Promo Items" content=$smarty.capture.menu}
|