Streaming live at 10am (PST)

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?


Hi @Marxamus Yeah that few pixels gap there is weird. I have a work around on that, however. Check this out.

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 for you to observe their properties.

Hope it helps.



Nice use of diagonals here. Cheers @Marxamus!


Thanks so much! That did the trick. See here:


@Marxamus smiley yeah. very nice.