[mertxe]

Hi! I’m starting a new eCommerce website with this theme and i’m running into some problems.

I’m on a temp installation, and the first bug i see is that in Chrome i see the “hero” text centered, but not in Safari.

Then, image gallery / slider is buggy on both browsers. On Chrome i see a grey block, and when i see an image it’s constantly resetting to the first one. On Safari it’s like 10px tall, can’t see anything.

Everything (theme, visual composer, wordpress and woocommerce) is on latest versions available on ThemeForest.

[Juanfra Aldasoro]

Hi Mertxe,

Thanks for writing, I hope you are doing well. I really love what you’re doing with the theme 🙂

With regards to the first issue, we recently modified the layout structure for version 1.1 and we’re now using flexbox. It seems that there’s an issue with Safari, would you please try adding the following custom CSS:

[class*="vc_col-"] {
    width: inherit;
}

With regards to the gallery issue, are you using any other gallery plugin that may cause a conflict with the JS of Flexslider (the one used by our gallery element)?

Thanks,
Juan.

[mertxe]

Tried the CSS snippet for the header, didn’t change anything on Safari. Even created a 3 column layout and placed the content in the middle, but still shows in the left. Column

Gallery now looks good on Chrome, still breaks in Safari.
There was a conflict with this plugin,
https://es.wordpress.org/plugins/variation-swatches-for-woocommerce/ Any recommendations for substitutes? Client needs to be able to show the patterns for selections :/

[Juanfra Aldasoro]

Hi Mertxe,

Sorry for the delay. Regarding the CSS snippet, have you tried adding the !important flag beside? Please be sure that you clear out the cache in safari.

With regards to the slider, have you tried to create a slideshow in slider revolution? We’ll be taking a look at these issues, though.

Best,
Juan.

[Juanfra Aldasoro]

Hi Mertxe,

I hope you are doing well.

We’ve been checking your site and it seems that Safari has some different defaults for flexbox.

We’ve added this CSS to your code and it now is working as expected:

.vc_column_container {
    flex-grow: 1;
}

With regards to the flexslider issue, it seems that there’s a conflict between flexslider (the script in charge of the gallery) and lazyload. If you disable lazyload, the slider should be working fine in safari. We’re investigating this issue as we speak.

Please let us know if the code I’ve sent you for the first issue went well.

Best,
Juan

[Juanfra Aldasoro]

With regards to flexslider. You can try adding the following custom CSS:

.flexslider .slide img {
    height: auto !important;
}

Best,
Juan

[mertxe]

Juan, I reply on this topic because I was just about to finish with this site but in my last check i see that in iPhones (i use Android Phone + Chrome on MacBook) content gets overlapped, displaced, etc.

See screenshots here: https://www.dropbox.com/sh/9w1ir2s5fr25prr/AADrciS36Ja9NJpWXkIgeYjGa?dl=0

In Android everything is just fine, but it gets messed up in iPhone.

Product pages look ok.

[mertxe]

Maybe it has something to do with this 5 errors which don’t show up on Chrome’s Console but they do on Safari’s:
https://www.dropbox.com/s/gv6mnunhb39zaux/Screenshot%202018-04-28%2013.17.44.png?dl=0

[Juanfra Aldasoro]

Hi Mertxe,

Thank you for the follow-up.

Would you please add the following custom CSS:

@media all and (max-width: 767px) {
    .nice_row-inner, .vc_inner, .row-inner {
        display: block;
    }
    .background-inner:empty {
        display: initial !important;
    }
}

Best,
Juan.

[mertxe]

That did the trick! Thank you so much!

[Juanfra Aldasoro]

My pleasure 🙂

Have a nice day,
Juan.