Responsive Sizing Question

[Andrew Newhouse]

I created an svg sprite with your grunt task and everything is working perfectly for me, however, I'm having one issue with responsive sizing that I'm clearly doing something wrong, but I can't for the life of me figure it out. So, looking to the community for some assistance.

I've read this thread and understand the sprite background positions now use %'s which is absolutely awesome! But I can't figure out how I can change the size of a particular image in the svg sprite?

I have been trying to study the examples on this page but I'm still not understanding how the relative % piece works. That is exactly what I'm trying to do, but I can't get it to work for my generated sprite. It appears in the example, that the background-size is set to: 100% auto and the background position is set to: 0 88.888888% on both the "original" and "double" sized images. The only difference is the height and width css properties are set to double the size which makes perfect sense and how I would expect my svg sprite to work.

However, whenever I set the background-size to: 100% auto it just puts the entire sprite image in the page as opposed to just the slice of the sprite I need. If I don't explicitly set the background-size then changing the dimensions on the sliced image of the sprite ends up cutting off my sliced image when lowering the width and height values or including more of the sprite when raising the width and height values.

My grunt task is as follows for the sprite generation:

spriteConfig       = {
  mode : {
    view : {  // Activate the «view» mode
      bust : false,
      render : {
        scss : true  // Activate Sass output (with default options)
      },
      example: true
    }
  }
...
    // svg-sprite configuration
    svg_sprite : {
      dist : {
        expand  : true,
        cwd     : baseDir,
        src     : [svgGlob],
        dest    : outDir,
        options : spriteConfig
      }
    }

Is there anything obvious that I'm doing incorrectly or forgetting? Even the example html/css that the task is spitting out as soon as I try to resize or set the background-size to 100% auto it messes up the examples in that page too.

[Joschi Kuphal]

@shredtechular I'm sorry but I must have completely overlooked your question and found it just now. Sorry for that!

If this still is an issue for you, could you please post all the files involved (HTML, CSS, sprite etc.)?

[Andrew Newhouse]

No worries at all @jkphl ! This isn't an issue for me anymore, I can't recall what I did to solve it, but I will close this issue now.