Website layout issues on older versions of Safari since Cornerstone update

[LewisWallis]

Hi there, it has recently come to my attention that one of my client’s websites (https://www.tomalbrighton.com) has a new layout issue on earlier versions of Safari such as (Safari 13.1.1) and (Safari 13.0.5) where there are missing blocks that should have background colours or images in them and also a lot of alignment issues. It seems to be fine in Chrome and Firefox. I should also add that it was previously fine on all versions of Safari until the update of Cornerstone. I have attached 2 images that shows the homepage on both Safari and Chrome. Any help would be appreciated. The website is running the most recent version of X (9.1.4) and Cornerstone (6.1.4). Thanks, Lewis!

[christian]

Hey @LewisWallis,

I see the issue. However, I replicated your setup in my test site and it doesn’t produce an issue when checked in Safari 13. This could mean that there’s something specific on your site that is causing the issue.

Would you mind performing the following steps to help isolate the issue?

1. Testing For Plugin Conflict
2. Css/Js Customization

Only if none of that helps, we need to investigate in the backend so please give us the following info in a Secure Note

• WordPress Login URL
• Admin username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

[LewisWallis]

Thanks, I have tried deactivating the plugins but this didn’t fix the issue. The issue that I’m experiencing with the site in Safari 13 also means that Cornerstone doesn’t load, nor do the theme options, so I am unable to check the CSS. Any extra investigation that you can offer would be great, I will provide my login details as a secure note. Many thanks

Thanks
Lewis

[ruenel]

Hello Lewis,

Thanks for providing the information. Please go to Tools > Site Health > Status. You will find out that there is a performance issue on the site. You need to address it. You can check out all the server settings in Tools > Site Health > Info > Server. As you can see, your PHP limit is only 128MB. Have it increased to 256MB or 512MB. The PHP post max size is only 8M. You need to increase it the same as the Upload max filesize. You can check out this article to know on how to be able to increase the value:

• https://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/

Best Regards.

[LewisWallis]

Hi, thanks for your help. I have addressed the Site Health PHP limit issue but the problems regarding Safari version 13 still remain. Any other ideas would be greatly appreciated!

Thanks
Lewis

[ruenel]

Hi Lewis,

I’ve taken a closer look at your site and I can replicate the issue using the previous versions of the Safari browser. I also checked your custom CSS that you have added in Cornerstone > Theme Options > CSS and I am seeing invalid CSS codes. Be advised that any invalid code can affect the layout or even mess up the page.

I would like you to double-check your CSS. You can use CSS lint or any online CSS checker like https://www.cleancss.com/css-beautify/ and then make sure to correct all your CSS code.

Hope this will help in resolving your issue. Thanks.

[LewisWallis]

Fantastic stuff, that totally resolved the issue. Funny it was only a problem with Safari since the Cornerstone update, but completely my fault for putting in some wrong code to begin with. Thanks very much for bringing it to my attention.

[ruenel]

You are most welcome, @LewisWallis.