[dhsedoParticipant]

I’ve set up several pages utilizing 2 and 3 column layouts. In Chrome and Firefox they work just fine. When I bring them up in Safari, the 2nd (and 3rd) column(s) are pushed down below the 1st column.

The offending pages are:

https://systemofcare.utah.gov/parent/
https://systemofcare.utah.gov/refer/
https://systemofcare.utah.gov/juvenile-competency-evalutation-and-attainment/
https://systemofcare.utah.gov/about/

Help!

[JadeModerator]

Hi there,

I have tried to check the site but it seems to be inaccessible at the moment.

[dhsedoParticipant]

Thanks for the quick response!!!

Unfortunately, the site is not open to the public yet. Here is more info:

All of the pages having a problem are using .flex and .flex-wrap in the row Class.

The css is for flex is:

.flex {
display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER – IE 10 */
display: -webkit-flex; /* NEW – Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
width:100%;
}
.flex-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-webkit-align-items: flex-stretch;
align-items: stretch;
}

.flex div {
width: 100%;
}

.flex.flex-wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

When I remove flex and flex-wrap from the Class input field, the boxes align, but they lose the ability to be the same length that flex and flex-wrap provides.

I am also attaching my full style.css file for reference.

Hope this helps!

[dhsedoParticipant]

Found the problem. Safari was adding about .0001% when rounding the total width.

So, I added the following to my style.css:

.flex.space-between {
justify-content:space-between;
}

.flex.space-between .x-column {
margin-right: 0;
}

.flex.space-between.x-container:before, .flex.space-between.x-container:after{
content: none;
}

and then added the class “space-between” to the offending rows.

[RahulModerator]

Glad you’ve sorted it out for yourself.

It’d be helpful for other users as well.

Thank you.

[Author]

Posts