Jump to content
novusweb

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

Recommended Posts

novusweb

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 updatescreenshot_36.png. You can see this on our home page: www.novusweb.com.

Share this post


Link to post
Share on other sites
novusweb

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

Share this post


Link to post
Share on other sites
Simon

Do you have a url where we can see this?

Share this post


Link to post
Share on other sites
Simon

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

Share this post


Link to post
Share on other sites
Simon

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

Share this post


Link to post
Share on other sites
novusweb

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.

Share this post


Link to post
Share on other sites
Simon

This issue should be fixed in todays build (5.1.4)

Share this post


Link to post
Share on other sites
jagipson

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. 

 

 

Share this post


Link to post
Share on other sites
edgarcheverier

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

Share this post


Link to post
Share on other sites
jagipson

Sounds good! Thanks!

Share this post


Link to post
Share on other sites
Ray

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

Share this post


Link to post
Share on other sites
jagipson

This fixed it! Thanks so much!

Share this post


Link to post
Share on other sites
greatthingsllc

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. 

 

Screen Shot 2017-11-17 at 3.19.24 PM.png

Share this post


Link to post
Share on other sites
edgarcheverier

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?

Edited by edgarcheverier (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have been unsuccessfully trying to get my 3-column widgetized footer aligned centered. The widget section itself is aligned left because the alignment appears to be controller the widget's content only. The container that contains the widget section is aligned centered. I have chosen a 3 column layout and I added 3 widgets, assuming they would be aligned centered.
      Any idea of what I may be doing wrong?
      The page is question is: http://www.michaelkummer.com
      Thanks
      Michael
    • ppotent
      By ppotent+
      It seems that whenever media is set to be on the left, there is a problem with the way safari displays them. I used to have boxes with media on left when i was using DMS2, but since PL5, I've had to use only media on top. I know there are a few css suggestions that people have offered, but I'm wondering if such suggestions can't be built into the boxes code for PL5 rather than having to add extra CSS. Otherwise, am really liking PL5 over DMS2.

    • David Shelton
      By David Shelton+
      I use Adobe's Fonts.com for specific branded fonts for our site, and it's working nicely on Chrome and Firefox. However, the fonts all default in Safari. Is there anything I need to look at?
      http://madeintheshadeblindsfranchising.com
    • hibbsy78
      By hibbsy78+
      I have an issue with the widgets on my blog post page. The Facebook widget is being shifted up and next to the Mumii widget above...? How can I force it to remain underneath?
      http://www.viewfromadaddy.co.uk/bellissimo-pizza-recipe/


    • emilyf
      By emilyf+
      Our new Pagelines site has been up about a month (brianboggschairmakers.com) and so far it's worked fairly well. 
      Reviewing our Google Analytics, however, has brought to my attention that the site is loading exceptionally slowly on Safari, both on mobile and desktop. Average load time for each page is 4-8 seconds, but on Safari, it's over 22 seconds!
      Anybody else have this problem? Any recommendations?
       
×