Custom CSS not working on Chrome Browser

Hi There, it seems that the custom css changes to my Navbar are not working on Chrome. Everything shows up fine on Safari but on Chrome the layout has been changed.

Any idea what is causing the issue?

As you will see from the two images below the Chrome Browser is pushing all of the elements lower down the page and adding space between the Navbar Menu items.

With thanks,

Seth!

Hey Seth,

The issue is not with custom code but just a rendering difference between Chrome and Safari. You need to compensate for that difference like reducing the Width or Max Width of the Row. In the Row settings, that can be done by turning off the Global Container and lowering the Width or Max Width .

image

Hope that helps.

Thank you Christian, it worked perfectly :slight_smile:

Hey Seth

Glad that we are able to help you

Thanks

Hi Christian, is there any other way around the issue other than making the row width 56%? That unfortunately doesn’t look very good on the website.

Also it doesnt solve the issue with the spacing on the Navbar Menu items which is very different on Chrome and Safari. (See attached image)

from what I understand Safari renders a wider screen width then Chrome and other browsers, so is there possibly some css we could add that instructs all browsers to render at the same screen width?

Thank you again :slight_smile:

Hey Seth,

The way other than this would require customization and which is beyond the scope of theme support.

I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks for understanding

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.