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.

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

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.

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:

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.

That’s a Wrap

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!