html - Responsively sizing a sprite -


What I'm using: Bootstrap 3.1.1, jQuery 1.11

What do I try to do I am doing this: Use a phantom for different class icons, and keep it through CSS.

On the XS device (phone) I want to put 3 of these on each row, because I am on the small medium; Large device

However, the size of each icon is 200x200. And I'm not sure how this type of perspective image should be shaped responsibly. If I change the #category-icons - the width of the Hands-Tools and the amp; Height, it shows only a small section of the phantom instead of changing the shape of the phantom.

Phantom can be found here:

Any thoughts, people? Should I use 2 different sprites, and should use CSS for the tablet to use a different sprite below media queries & amp; phone? I'm not sure at all.

Looking for the easiest solution, which works perfectly.

JS Fiddle at:

  & lt; div class = "colonel-LG-4 colonel-MD-4 call-SM-4 pen-xs-4" & gt; & Lt; a href = "/ hand-tool / c / p 101 /" title = "hand tools" class = "hand-tools" target = "_ blank" & gt; Hand Tools & lt; / A & gt; & Lt; / Div & gt; #Category1Banking {background: url (/images/art/mobile-category-icons.png) no-repeat; Margin-right: 11px; Text indent: 99 99 pixels; Hidden flurry; Display: Inline-block; Margin-down: 5px; -Mozy-infection: All .2s ease; Webkit-Infection: All .2s ease; -O-Infection: All .2s ease; } # Category-icons a.hand-tools {background-position: -30px-30px; Height: 200 pixels; Width: 200px; Margin-top: 32px; }   

Spirits are not really sensitive even if not responsive.

You can use it to create responsive phantom :)

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -