Making a sprite scalable

[Lisa at OG]

I'm wondering if anyone can help with this. We are using text widgets in the three home-bottom widget sections of our home page and placing sprites inside of them. With sprites you have to add specific width and height and so they can't be set to auto; BUT, we do want them to scale when viewed on an iPad. If we use a Genesis Featured Widget Amplified below the text widget, it automatically scales for an iPad; however, we don't need one as we are not putting any text below it. When we remove it, the information (sprite code) no longer scales down for an iPad.

Does anyone know what additional code or CSS we need to add to our sprite or the text widgets they are in to make the home-bottom areas scale down on an iPad?

Here is a link to the demo site in progress: http://www.originalginger.com/demos/saxon/

http://www.originalginger.com/demos/saxon/

[David Chu]

Hi,
Fascinating question. You could simply make 2 or 3 sprites depending on how many size changes you'd want, and swap them (along with their new dimensions) as you move through the breakpoints. Just like what you might do with a wide header image. Maybe fiddling with width percentages would handle that better than exact dimensions. There could be CSS3 tricks for this, too.

But that would make the images very small at mobile size, and I wonder if you'd really want the hover swap there? I would stop them floating at a certain size and maybe make them full-width, and then I may not even need to change sprites. That's kind of what I did here, although that was a bunch of custom jQuery rather than sprites/CSS because I was dealing with custom fields and such, too.

That's my shoot-from-the-hip thought. 🙂

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Lisa at OG]

I'm pretty sure that you can't use percentages with sprites -- we would like to avoid creating different size images for different devices. We definitely DO want the hover state on an iPad.

[Author]

Posts