SVG code - width 100%

[optobiolabs]

Hi there,

I wrote an SVG code for our website footer and put it in a “content area” (footer name: “test footer”).
Even though I have 100% width in the SVG code, it doesn’t show the object over the the full screen width.
Is there a problem with my container settings? Or is it my SVG code causing trouble?

Many thanks!
Raphael

[Alaa]

Hi Raphael,

It should be in full width now, I’ve edited the container flex settings to be like that:

Then, I’ve added this CSS code to the Content Area element CSS:

Thanks.

[optobiolabs]

Many thanks!
One more question:
I added the same svg code to the header and turned it by 180° with the following element CSS:

svg {
transform: rotate(180deg);
}

However, now also the svg element in the footer is turned by 180° - how do I limit the element CSS command only to the svg element in the header?

Thanks!
Raphael

[rad]

Hi @optobiolabs,

It should be the same as above, you’ll have to add this CSS to the element CSS where you added the SVG code.

$el svg {
transform: rotate(180deg);
}

Thanks!

[optobiolabs]

@Rad, thanks a lot! It works. Awesome!

Two more issues occured:

1. Is it possible to remove that thin line in the black area between header and the content?
   

2. If I now add a second bar in my “test footer” below the bar containing the svg element, the footer is skewed and the new bar is not shown below but somehow to the right side of the svg containing bar. How do I solve this?

Thanks!
Raphael

[christian]

Hey Raphael,

1. It’s coming from your SVG. Fixing that in the SVG itself is outside the scope of our support. But, one trick I could share is you can hide it by setting a fixed height to the Content Area container and set overflow to hidden using CSS.

2. You forgot to close the div in your SVG. I closed it now.

Hope that helps.