[mdcaro]

Hi there!
i’m running into some problems with the theme after the last update.
I see in the forum that you’ve made some layout structure modifications related to flexbox.

Chrome and Firefox is OK.
The problems are in mobile iOS view. Some elements break. In Android devices runs well.
I clear the cache and I ask some people to send me screenshots to confirm it.

I tried with some CSS snippet and it doesn’t respond.
Do u have any solution?

I wait for the response, thank you!

[Juanfra Aldasoro]

Hi,

Thanks for writing. I hope you are doing well.

Yes, there are some Safari issues and we’re working to get them addressed for the upcoming version.

Would you please describe the problem you’re currently having so we can check if it’s something we’ve already worked on or something new?

Thanks,
Juan.

[mdcaro]

Hi Juan, thanks for the response.

Regards to the problem, the thing is that the whole layout seems broken (only in safari – mobile):

1. Layout elements like rows with 4 columns maintain the structure in mobile.
For example, when in desktop I display 4 columns and I Expect to see 4 rows in mobile, they are still in columns. So there is a whole part of the content that doesnt show in the screen.

2. Margins and paddings are not respected so one content “step” the content above.

3. I can’t set css mobile options – that in latest versions runs well. It’s like the system doesnt read them. For example, I want the title in desktop with a font-size. And in mobile I want it smaller. When I set it in the css snippet with visual composer doesnt works. Neither in Smart Theme Options > custom code & scripts. Neither in Customization panel.

Ex.:

@media only screen and (max-width: 570px) {
h1 {
font-size: 18px;}
}

I tried deactivating plug ins but still breaks.
I don’t know if this description helps. Maybe I can link some img.

[Juanfra Aldasoro]

Hi,

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.

[mdcaro]

Thanks, Juan, I added it and now the issue is solved 🙂

[Juanfra Aldasoro]

Hi,

Thanks for the follow-up.

I’m happy to hear that!

Have a fantastic day,
Juan.