GRID FORM SAFARI

but in safari i can’t see the grid

the fields are all displayed in a single row?

your theme has is injecting some css styling for ‘row’ classes but it is not targetting the row class properly, a sign that the styling is poorly done.

This plugin uses ‘row’ and ‘columns’ classes to create grids, however each styling rule is specifically targetted with additional ‘cf7-smart-grid’ classes to prevent such styling clashes. A properly developed theme would follow such css convention to ensure such clash does not occur.

but in safari i can’t see the grid

in addition, your theme is using display: flex; in its ‘row’ styling which does not work on safari.

To test this, you can switch temporarily to one of the free WP themes (twentyfifteen for example) and test your form page on safari again.

You will either need to disable all the styling overloads from your theme on your form page for safari or switch themes.

hi there, thanks … i’ll test soon … i’m using ciyashop theme ..
but from your experience no problem with safari?

but from your experience no problem with safari?

None so far. This plugin uses an open CSS plugin developed and maintained for all browsers. It is further tweaked to target the cf7 forms as explained above.

I use this plugin on several projects one of which is a website for group of 5 star hotels whose clients primarily use apple devices and it works seamlessly on all versions of Safari

@maxidg Did you find a solution to this issue? I am confronted with the same issue using ET Divi 4.0

Thinking of building my own CSS Grid – but if there is an easier solution why not.

Thanks,
Phil

hi there,
@psudan sorry @ the end I giving up …

??

@psudan can you share the link to the page where you are facing an issue?

@aurovrata – Sorry for late reply and thanks for your great work on this plugin.

https://taxstamptraceabilityforum.com/call-for-papers/

https://taxstamptraceabilityforum.com

For some reason on Safari there is an issue with a 100% width in a DIVI column, if I slightly change the margin as below, now it comes to around 99.8% and display the dual column properly.

@media (min-width: 481px), all
smart-grid.css:29.cf7sg-container .cf7-smart-grid.has-grid .columns {
float: left;
margin: 0 0 0 2%; -> instead of 2.12766%
width: 6.38298%;

Hope you can point me in the right direction. Running version 3.0.3

For some reason on Safari there is an issue with a 100% width in a DIVI column, if I slightly change the margin as below, now it comes to around 99.8% and display the dual column properly.

That’s odd. I have never faced this use. I will take a look when I have access to a Mac next week and get back to you.

thanks for your great work on this plugin.

@psudan do leave a review when you a moment to spare.

@psudan I finally managed to check this.

The issue is that the row element which contains columns is being targetted by the following styling rule in bootstrap.css,

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

this is a common mistake made by many themes which do not target their elements. This plugin uses the row class, but the css targets it properly to ensure only forms are affected.

Anyhow, I have now added some additional css rules for rows to ensure this issue doesn’t arise.

I have released v3.0.4 with the fix, please test and let me know.

@aurovrata Yep, working nicely now and have removed all my CSS, thanks for your all your hard work!

@psudan great, happy coding!