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

    • jeomiland
      By jeomiland+
      Greetings
      I just migrated an old DMS2 site to PL5 at cassClayton.com. If you look at the site on Safari browser, you will see the top nav bar (NavPro) is white, but gets revealed as you start to scroll the page. NavPro is used in the Header section, then a Text section in which I have Shortcode for the Smart Slider3 plugin. Would have preferred to use a PL-compatible slider but found it difficult to get Flick and Impress slider to simply fill full screen, just height of images (they were filling whole screen, hence large black area filling in the rest).
      So seems on Safari that the load order of the plugin may be causing the Nav bar to be overwritten? or something. 
      Hoping someone can help?
      thanks...  (works fine on Chrome, Firefox, even Tor, just not Safari)
    • 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/


×