Messed up CSS on safari browsers

Hello, Why is my website’s front-end all messed up in safari browser? Especially on mobile?

1) Footer text is not visible
2) Buttons are not centralized

These issues only occur on safari and iphones

Attachments:

You must be logged in to view attached files.

Hello,

1) For the footer items not visible try regenerating the CSS from Woodmart >> CSS Generator.

Then clear cache and check back.

If the problem still occurs then provide with the admin panel login details of the website to check it myself and help you out accordingly.

2) Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.elementor-button span {
    padding-top: 5px;
}

Regards.
Xtemos Studios.

Adding CSS will effect the normal browsers as well. I have tried that already. The problem is with the compatibility with Safari Browser. Not css

Hi,

Looks like this issue is caused by custom font that you are added to your site. To debug this issue first you need to do the following steps:

1. Disable all plugins that not related to the Woodmart theme and clear browser cache.
2. Go to the Elementor Site Settings (http://prntscr.com/yec50j) and reset all values (especially typography ones) to the default, since to exclude any conflicts all general site settings need to be set via Woodmart Dashboard Theme Settings.
3. Go to Elementor => Tools and press Regenerate Files (http://prntscr.com/yecm8s)
4. Go to Woodmart Theme Settings => Typography and try to switch your custom font to Default or Google font and check if the problem exist.

Best Regards

[Author]

Posts