Streaming live at 10am (PST)

Using 100% width SVG in header


#1

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


#2

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 https://webflow.com/design/livehelper?preview=64db81b7f9f1dcb5fe0be42d89a14d89 for you to observe their properties.

Hope it helps.

Cheers


#3

Nice use of diagonals here. Cheers @Marxamus!


#4

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


#5

@Marxamus smiley yeah. very nice.


#6