Skip Navigation

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

This support ticket is created 2 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 5 replies, has 2 voices.

Last updated by simonM-5 2 years, 8 months ago.

Assigned support staff: Waqar.

Author
Posts
#1567951

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/

#1568043

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

#1568205

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#1568243

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

#1568917

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#1569123

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!