[Resolved] Issue with Fusion builder's pricing table in Safari on Mac

[Author]

Posts

[simonM-5]

HI Waqar - just the man I wanted to speak to! 🙂 I got word from back from Avada Support team, claiming that the problem with displaying the Avada Fusion Builder element Pricing Table is indeed due to the Toolset Types plugin. Here's their response:

"We have investigated the issue on your website.

hidden link

Problem is coming from above file, it is from one of your plugins. Css of this file affects the pricing table appearance for the safari."

Should we just reopen the previous ticket or do you prefer a new thread?

Related to:
https://toolset.com/forums/topic/avada-faqs-element-not-working-with-toolset-bootstrap/

[simonM-5]

HI Waqar

I moved the snippet from functions.php to Toolset Custom Code (fix-bootstrap-conflicts-with-avada).

I tested the 4 fusion builder elements with and without the snippet active. Here are the results:

With the snippet INACTIVE:
NOT OK - Toolset Forms all get squished: hidden link
OK - Pricing table displays correctly: hidden link
OK - Content tabs showing correctly (need to be logged in to see, see previous ticket for logins): hidden link
OK - FAQs displaying correctly: hidden link
(However I believe the FAQs issue was fixed with the Additional CSS from below:

https://toolset.com/forums/topic/collapse-not-working-from-bootstrap-4-bundle/#post-1339703
.collapse.in {
display: block !important;
}

With the snippet ACTIVE:
OK - Toolset Forms display correctly
NOT OK - Pricing table displays incorrectly only in Safari on ALL Apple devices (iPhone, iPad, Mac)
OK - Content tabs showing correctly
OK - FAQs displaying correctly

Best regards
Simon

[Waqar]

Hi Simon,

Thank you for sharing these results.

It seems that Safari on Mac processes the CSS "flex" display property differently than the other browsers.

Can you please include the following custom CSS code in the page with the pricing table and then check it again in Safari?
( With the snippet ACTIVE )

.row.fusion-pricing-table {
    display: block !important
}

regards,
Waqar

[simonM-5]

Hi Waqar

I placed that CSS code in the Appearance > Customise > Additional CSS along with the other CSS for the FAQs mentioned earlier. (Presuming that's fine, rather than including it specifically on that one Page?).

Now Safari on Mac can display the pricing table, as can iPad. GREAT! 😀 iPhone still not showing it well though.😕

Before this code change, iPhone was able to display 2 columns and the 3rd one dropped below. Now the columns are all displayed one underneath each other.

This may be due to responsiveness but I am not sure. What are your thoughts on this?

Kind regards
Simon

[Waqar]

Hi Simon,

Thanks for the update and glad that it works.

Your understanding is correct and the pricing table columns are shown stacked on top of each, on smaller screens due to responsiveness.
( you'll notice the same for the table in the demo page: hidden link )

regards,
Waqar

[simonM-5]

Hi Waqar

You're right - I checked the "standard" one on Avada's site and they do stack up on top of each other on iPhone. So I think we can close this one now. Thanks!

My issue is resolved now. Thank you!