To be honest, I don’t know how to properly name this post for this specific issue, but I hope it will be discovered by people who are experiencing it.

On a couple of my pages, I have 3 columns with no spacing between and a zoom-in effect on hover. And they’re on a 100% width container.

avada full-width columns

But a thin vertical white line (margin) appeared next to one of them, depending on the browser, like this:

margin column avada browser rendering

This was permanently showing in Chrome. In Firefox, it would only appear on mouse hover. And in Opera (yep, that’s a browser), it was showing on the left side.

And I knew that this isn’t a problem on my end because it happens on their University demo as well.

avada university demo columns rendering issue

So, it was clearly a browser compatibility issue, but I didn’t know how to fix it on my own.

After contacting support, I got the fix, and I’ll share it with you.

What you need to do to fix this browser rendering issue in Avada is to add a CSS code in WordPress or directly into the theme by going to Avada > Theme Options > Custom CSS.

This is the code that you need to add:

Copy to Clipboard

Most likely, you won’t see the change just by refreshing the page, so make sure you clear your browser and site cache after adding the code.

Related posts:

That’s a Wrap

WP Rocket - WordPress Caching Plugin

I hope this post was useful to you and solved this problem with full-width columns in Avada!

If you need help setting up your WordPress site, my WordPress services are at your disposal!

You can quickly subscribe to my newsletter by using this link.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

Don’t forget to share the post to help out others!

Big Discounts for Domains, Hosting, SSL and more