Different displays in chrome and safari

[gdub132]

Here are two screenshots of the same page loaded at 100% in Chrome and Safari. As you can see, the alignment is off on the Chrome browser. Any ideas on how to remedy this? Thanks.

[prakash_s]

Hello Greg,

Thanks for writing to us.

Sometimes it is not possible to investigate your issue by just a screenshot. Would you mind to share your exact page URL with us so that we can check your settings of the page? I would suggest you, please make sure your theme and plugins are updated as per our version compatibility page. I would also recommend, you must check the common issue as well with a troubleshooting guide.

Thanks

[gdub132]

The page is https://katyawarner.co/blog/. I have updated everything so I don’t think that’s it. Thank you.

[ruenel]

Hello Greg,

Thanks for writing in! You are having this issue because of your Flexbox setting in each of the columns. Please set the Flexbox enable and position it Start only. In your image element, add set the top margin of the image element to auto. If this does not make sense, kindly check out this video tutorial about Flexbox:

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[gdub132]

Hello I was unable to resolve this trying the method you advised so I provided you with my login info. Thank you very much!

[tristup]

Hi Greg,

Unfortunately, the login URL redirects us to WordPress.com. Can you please check and let us know while the login is accessible.

Thanks

[gdub132]

If you use the login credentials I supplied shouldn’t that log you into my wordpress account? From there the website in question is katyawarner.co and the page is https://katyawarner.co/blog/

Thanks.

[tristup]

Hi Greg,

I have checked your website in the Safari and Chrome browser and the it is identical, and didn’t find the issue you specified in your comment.

If you are still having this issue, please mention the device, browser name, and version, and also the operating system you are using, which helps us to replicate the issue at our end.

Thanks

[gdub132]

I’m using Chrome Version 88.0.4324.192 (Official Build) (x86_64) on a 13 inch MacBook pro Catalina 10.15.7. The problem was that page, https://katyawarner.co/blog/, was displaying properly on safari but not chrome. Here is a pic of it on chrome, what do you think?

[marc_a]

Hi Greg,

I confirm the issue in both Chrome and Safari. As you can see in the screenshots of my colleague using the Safari browser the second column headline is 3 lines while on chrome is just 2 lines and that the reason why they are displaying differently. I also check the HTML structure of the 3 columns and they are not the same, the HTML code inside the text element is inconsistent. See the screenshot below.

I suggest that you follow the HTML structure inside your text element column 1, then define the height of the text element to make it consistent with all browsers. Click the customize tab of your text element then edit CSS and add the code below. Then apply it to the other columns.

$el{
  height: 69px;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[gdub132]

That worked, thank you very much!

[ruenel]

You’re welcome Greg.