Using 100% width SVG in header

I’m almost done with a new client site, but need a little help on how to get the SVG I’m using in the header to expand to fill 100% of the browser. It seems to look fine in the Designer Tool, but not when published; you can see a few pixels either side.

Can anyone tell me how to fix it and make it 100% width?

https://webflow.com/design/aplw?preview=9918a77faa0627a0a1f382b7da94844c

Hi @Marxamus Yeah that few pixels gap there is weird. I have a work around on that, however. Check this out. http://livehelper.webflow.com/#svgfullwidth

What I have done there:

  1. I’ve put SVG image into a Section and gave a class ‘svg-full-width’ for that section. And set its Overflow to Hidden.
  2. Then, I’ve set a class ‘svg-img’ for your SVG image and set its margin-left to -10px, set its Width and Max width: 110% both.

Livehelper public link is Webflow - livehelper for you to observe their properties.

Hope it helps.

Cheers

1 Like

Nice use of diagonals here. Cheers @Marxamus!

Thanks so much! That did the trick. See here: http://aplw.webflow.com/

@Marxamus :smiley: yeah. very nice.