SVG on Header/Footer visible on Chrome/Safari or Firefox, but not both

[fabiofava]

Hello folks,

I’ve managed to create Headers and Footers with SVG (so I can have them nice on WC Store & Products pages, and Blog & Posts pages (and Archives I assume). But they’re only visible on Firefox (and Tor or other Firefox-based) browsers.

They aren’t visible on Chrome-based (or Safari). I’m sure I’m missing some code, don’t know if CSS or some functions.php (or any other PHP) code, to allow my beautifull Headers & Footers to be visitble on all browsers.

I’m working with a very good Pro designer (well-known at Themeco), and he has managed to create other Headers & Footers that work on Chrome/Safari. But his SVGs are appearing duplicated on Firefox-based browsers. We can’t manage to make work on both…

Could some magic Themeco Support CSS Ninja help me solving that “mistery”? I’ve prepared a Staging Site for you with credentials, that are attached as a Secure Note.

Thank you very much in advance and best regards!

[christian]

Hey @fabiofava,

I couldn’t get in because of WordFence. Please temporarily disable it in your site and also any IP restrictions so we can investigate if this is an issue with our theme.

Thanks.

[fabiofava]

Please retry. It blocks only for 5 minutes, and normally is due to multiple wrong username or password. I’m looking at my Wordfence Dashboard, and there’s no block there. It was probably auto-removed after 5 minutes as it’s set to do.

Now I noted that I gave you the wrong WP Admin Login page. There’s a “pro.” on the begining. I’ve updated the Credentials so you shoulld now be able to login.

Please use the provided credentials, make sure all characters are exactly as there. I’m online please keep me posted, cheers!

[fabiofava]

Hey @christian, @jade ,

I’ve managed to solve the Headers, so all I would need is to discover the way to have the SVG also fon the footer. I’ve asked the designer to try again on the Footer, since after his last work on the Headers, I’ve managed to make it happen… Unfortunately he wasn’t able…

Hope we can make my SVG divider on Footer to work, thanks1

[ruenel]

Hello Fabio,

It looks like that the SVG is now working also in your footer. This is what we are seeing right now:

If you need anything else we can help you with, don’t hesitate to open another thread.

[fabiofava]

Hello @ruenel unfortunately not. You should look the footer for the following pages:

https://pro.flyorganya.com/es/vuela/ vuela/ --> and any product’s footer
https://pro. flyorganya.com/es/vuela/experiencias/ --> and the post footer

The actual footer to work on is “Footer Store & Blog” wich is applied to Store Front, Blog Page, all Products and all Posts. Making this to work would need test on:

Chrome --> PC (Mac) and Mobile (both Portrait and Landscape orientations)
Firefox --> PC (Mac) and Mobile (both Portrait and Landscape orientations)
Safari --> PC (Mac) and Mobile (both Portrait and Landscape orientations)

You’ll note that there’s NOT the SVG on Crome/Safari, and the SVG on Firefox only works on PC (Mac) but looks misplaced on mobile. I hope some of you can help me, since myself and my designer (very professional with Pro) weren’t succesfull.

[friech]

Hi Fabio,

Please add a width: 100% to the Content Area containing the SVG file, please keep in mind that the Header and Footer Bar/Container are powered by Flexbox and in flexbox, a display:block div (e.g. Content Area element) will not get a width like it normally would (at least on Chrome), its width and height depends on its content, and your content (SVG file) has no defined width as well.

Add width: 100% to your content area and adjust height accordingly.

Cheers!

[fabiofava]

Hey there, thanks for the reply.

First of all it should appear on Chrome and Safari, wich it doesn’t. After we make it be visible on Chrome and Safari (all browsers), then it should be time to find the width and height. Without having it visible on all brosers, anything we do is useless.

I really hope someone at Themeco can find the magic code to:

1. make the SVG at bottom to be visible in any browser, any platform.
2. make the SVG at bottom to have proper width and height.

[ruenel]

Hey Fabio,

After further investigation, I found the cause of this issue. You need to add a container that has it own width. The flexbox setup does now set the width. It will only depend on the width of the elements inside it. This is why the SVG do not display because it has a 0 width and height. To make this work, please go to Pro > Global Blocks and create a block that will contain your SVG file. Insert a section/row/column layout and set a minimum width and minimum height in the column settings.

You can then use the global block shortcode and insert it in the content area which you have in the footer.

I went ahead and made the necessary changes for you to set an example. Please check your footer now.

[fabiofava]

Hey @ruenel thank you so much! Unfortunately there are issues depending on the browser and the screen size. Would be possible to add Bottom Alignment so it get sticky to the bottom? Also the sides are being cut for smaller screens, it should only shrink… This all is too much above my league, so I really don’t know how-to… But I feel your work is kinda 95% of what we need, I assume with another session you’ll much likely nail it! Can you helpl?

[rad]

Hi Fabio,

Hmm, this may not be possible with just CSS or setting since responsive element/layout are still depending on existing or original dimensions similar to standard image. But adding minimum size removes it responsive nature.

The issue here are SVG’s without height and width which then result to 0 size (responsive is based on multiplication and division, and 0 will always result to 0. And there are SVG’s that has dimensions, depending on which editor your SVG file is created, and they works fine with flex layout. I recommend checking this https://medium.com/@ayumitabinote/how-to-resize-a-svg-image-7829bac8948c, you can add bigger dimensions, it will then scale properly within the layout. This means your SVG will be responsive to any layout since it has values, example, 50% of 800px is 400px compared to 50% of 0px is 0px.

Thanks!