Edits to "icon template" layout looking different in Firefox vs chrome

[gabrieal]

Hello,
i installed the icon template and started customizing it with the customizer and also building parts using Elementor. I got my first section looking just right in Firefox (mac latest build) and then i took a look in chrome and it was a mess.
please take a look at my site in Firefox and then in chrome and you will see what im talking about.

www.gabriealmaulucci.com

Heres the issue -
so in FF the menu nav shows transparent where as in chrome its showing some gradients which were set by me at some point to test the background menu color. The way i went about making the menu nav background transparent was to add some custom CSS i found on the forum. That custom Css is also making the nav bar transparent. Again its working just not in chrome.

The other issue is the fullwidth image im using for the section background and where the header copy is placed. in FF its fine and in chrome its all over the place.

now im just confused as how to remedy this across browsers. i thought these themes and building tools were pretty cross platform friendly, maybe im wrong?

so any light you can shed on this or direct me to some documentation would be greatly appreciated. If you feel elementor is the issue let me know i can follow up with them as well.

thanks!
gabe

[friech]

Hi Gabe,

Thank you for writing in, is this the gradient background you applied (https://prnt.sc/hjoje8)? Notice the value that is prefixed with -webkit- and -moz- you’ll see it has a different color value, that is why you get a gradient on Chrome and 100% transparency on Firefox.

Regarding your top banner, sorry but we can not provide support for 3rd party plugins and script. I could tell you what is the issue though (it’s not the Elementor) but on your setup.

This headline has a 40% margin-top

Firefox computed that 40% value as 0;

While Chrome, calculate that as 539.594px

That is why that headline is far away from the top.

That is a browser issue and there is nothing we can do about it. That means you need to vertically center that headline in a different way, not with a top margin.

Hope it helps,
Cheers!