SOLVED IN 1.4: SVG wrapper is missing critical style

SVGs are wrapped in a DIV on the front end (at least until the bloat is optimized more by eliminating these DIV wrappers around everything—there’s a feature request for this on the idea board).

Until then, SVGs are always positioned to the left within their wrapper when the SVG width is set to less than 100%. This CSS is needed to keep the SVG centered (also need to fix in the builder, because this CSS doesn’t work there).

.bricks-element-svg {
justify-content: center;
}

Hi Eric,

thanks for this very good catch! It seems like the width gets applied twice: on the wrapper and on the svg itself. Set the width to 50% and you’ll see, that the svg itself is only 25% wide.

I’ve added it to our to-do list. In the meantime, you can use this custom CSS:

.bricks-element-svg svg {
  width: 100%!important;
}

Best regards,
timmse

This doesn’t work because it then overrides and width setting set for the SVG:
Screen Shot 2022-01-24 at 1.19.11 PM

I was never very good at math, but 100% (svg) of 200px (svg wrapper) is still 200px :wink:

It doesn’t matter if the width of the SVG is overwritten (which causes the problem if you use percentages) because the wrapper still has the width. So as long as the SVG gets 100% width, it fills the wrapper. And that fixes the problem.

If you use pixels, you have no problem because both the wrapper and the SVG have the same value. However, if you use a percentage value like 80%, the SVG fills only 80% of the wrapper width. So to fill it completely, it would still have to be 100%, even if the wrapper is only 80% wide.

Ugh, you’re right. I forgot about that annoying wrapper DIV. Thanks.