[Solved] [Solved] Widget in Safari Not Breaking Correctly

[novusweb+ 1]

We're seeing an abnormal break in widgets in Safari (El Capitan v10.11.4). 3 Widgets set for 4 of 12 columns each breaks correctly in Chrome and Firefox, but the 3rd widget goes to another line in Safari.

Screenshot attached.

Hoping there's a CSS fix you could recommend in the meantime, until an update. You can see this on our home page: www.novusweb.com.

[novusweb+ 1]

Any help with this? Sorry to bother, but the footer really looks bad. I just loaded today's update, too.

[Simon 248]

Do you have a url where we can see this?

[novusweb+ 1]

Yes, the one I posted earlier: https://www.novusweb.com

Thanks for your help!

[Simon 248]

I'll take a look tomorrow, sorry about the delay.

[Simon 248]

I'll take a look tomorrow, sorry about the delay.

[novusweb+ 1]

No problem. I know you're busy!

If you notice on that footer, as well, the widgets don't stack in mobile view. Not sure how to fix that, but I'm digging around to find out.

[Simon 248]

This issue should be fixed in todays build (5.1.4)

[jagipson+ 10]

Hello Simon,

I am having the same problem on my website with the footer. It would look fine on both Chrome and Firefox. However on Safari the 3rd widget would kick to a second line. 

 

 

[jagipson+ 10]

https://adel-lawrence-jeffgipson.c9users.io

[edgarcheverier+ 26]

Perfect, thank you, I will check it now in order to find the problem.

[jagipson+ 10]

Sounds good! Thanks!

[Ray 15]

Hi @jagipson

Seems to be an odd safari bug which we'll be fixing. For now, you can do a quick temporary fix with this css: 

 

div.widget-col.pl-col-sm-4{
  -webkit-flex-basis: 33.233%;
  -ms-flex-preferred-size: 33.233%;
  flex-basis: 33.233%;
  max-width: 33.233%;
}

Here's a video: https://cl.ly/n3ht

[jagipson+ 10]

This fixed it! Thanks so much!

[greatthingsllc+ 0]

Any updates on this issue.    I have having the same issue with 3 of 12 columns on Safari vs chrome.       homepage of doritbrauer.com    The example is Safari on top right and Chrome on bottom and left. 

 

[edgarcheverier+ 26]

Hi, can you try applying this CSS code into your LESS/CSS editor: 

div.widget-col.pl-col-sm-3 {
  -webkit-flex-basis: 33.233%;
  -ms-flex-preferred-size: 33.233%;
  flex-basis: 33.233%;
  max-width: 33.233%;
}

or this one

div.widget-col.pl-col-sm-4 {
  -webkit-flex-basis: 33.233%;
  -ms-flex-preferred-size: 33.233%;
  flex-basis: 33.233%;
  max-width: 33.233%;
}

did you have disabled the right click on your website?