Safari forcing two column into single column

Support
#1

Not sure what is happening. The page displays fine in all other browsers and mobile.

This is the page in question:
http://dreambuildersfoundation.com/in-the-news/

and this is what it’s doing in safari:
http://prntscr.com/oqb0zd

I added this flex-box code.
https://theme.co/apex/forum/t/equal-columns-team/48163

Not sure if that is the problem or not.

Any help would be great.

Thanks,
Adam

#2

Hello Adam,

Thanks for writing in!

To resolve your issue, please update your custom css and use this instead:

.flex-box {
    display:-webkit-flex;
    display:-webkit-box;
    display:-moz-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    flex-flow: wrap;
}

We would love to know if this has worked for you. Thank you.

#3

Thanks for the reply. Unfortunately it did not work. Still displaying as one column.

#4

Hi Adam,

I have just checked on my safari browser and the columns are displaying correctly on my end:

Can you try clearing your browser cache and check the site again?

Let us know how it goes.

#5

I turned off flex box to see if it displayed correctly in Safari and it did. I tried the code again and cleared browser cache but I’m still getting one column. I’m using a brower checker to see if it’s working.

Is it something wrong on my end?

#6

Hi Adam,

Please put back the flexbox code and provide us your OS and Safari version so we can try to replicate the issue. In the meantime try it on a different machine and see if the issue persists.

Thanks,

#7

I put the flex box code back. I just checked on a friends mac and it’s still displaying one column. It was Safari version 12.1.2

#8

Hey Adam,

Please update the custom css and this time use this:

.flex-box {
    display:-webkit-flex;
    display:-webkit-box;
    display:-moz-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
}

Hope this helps. Kindly let us know.

#9

Thanks. That code fixed the issue on desktop. However the the page lost its responsiveness on mobile.

#10

Hello Adam,

The code will affect both the desktop and mobile screens. If you can update the code into this, the mobile issue should be resolved.

@media(min-width: 980px){
    .flex-box {
        display:-webkit-flex;
        display:-webkit-box;
        display:-moz-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
    }
}

Please let us know if this works out for you.

#11

Awesome thank you! That fixed both issues. Is there any way to get a break between each column in mobile view?

#12

Hey Adam,

Please add a bottom margin for each column so that when the columns collapse, the bottom margin will serves as a gap between columns for smaller screens.

Hope this helps. Please let us know how it goes.

#13

Great. Thank you for all the help. Everything is now displaying correctly.

#14

We are delighted to assist you with this.

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.