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.


1 Like

Nice use of diagonals here. Cheers @Marxamus!

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

@Marxamus :smiley: yeah. very nice.