Jump to content


Photo
PostPins

DMS2 Post Pins issue: last letters of words are going to next line



Best Answer GetMeWebDesign , 09 April 2014 - 07:31 PM

I would need help to solve this as there are things going on in Firefox and IE. Probably the developer could update and change these rules:

 

Firefox: Now

 

.postpin {
    -moz-hyphens: auto;
    word-break: break-all;
}
 
break-all should be normal
 
IE 11
 
media all
.postpin {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    background: #f6f6f6;
    border: 1px solid #ffffff;
    margin: 8px 0;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
}
 
Not sure why two rules there but either break-all; or break-word; should be changed to normal 
 
Using both of these it fixed the problem. However, I am not clear on how to write Browser specific CSS. However....add this to your fallback CSS in wp-admin > Pagelines
 
.postpin {
    word-break: normal;
}
 
And it solves the problem :phew:
Go to the full post


  • Please log in to reply
9 replies to this topic

#1 imagineutopia

imagineutopia

    Advocate

  • Members

  • 276 posts
  • LocationKansas City
  • Country: Country Flag

Posted 08 April 2014 - 03:34 AM

hi.

 

I'm trying to use PostPins to display some posts and its having an issue.

 

the headers are not breaking at each word and its putting lone characters on the second line.

 

what can be done to correct this?

 

break.jpg



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 08 April 2014 - 02:26 PM

Hi John - could we have a link to your site please?



#3 imagineutopia

imagineutopia

    Advocate

  • Members

  • 276 posts
  • LocationKansas City
  • Country: Country Flag

Posted 08 April 2014 - 02:48 PM

its http://184.154.227.20/~localsta/

 

the pins are at the bottom. I see the last two are doing it.



#4 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 08 April 2014 - 06:51 PM

Odd... see the issue in Firefox and IE but not chrome



#5 imagineutopia

imagineutopia

    Advocate

  • Members

  • 276 posts
  • LocationKansas City
  • Country: Country Flag

Posted 08 April 2014 - 07:45 PM

I'm getting it on chrome.

 

strange for sure. I use postpins in pagelines classic and its pretty solid.



#6 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 08 April 2014 - 08:02 PM

Tested on a mock site I have and similarly ok on chrome, not good on IE or Firefox



#7 imagineutopia

imagineutopia

    Advocate

  • Members

  • 276 posts
  • LocationKansas City
  • Country: Country Flag

Posted 09 April 2014 - 06:47 PM

I don't suppose some simple <nobr> tags in the code would keep thing from falling apart?

 

I'd like to use this but don't want the client to see it like this.

 

should I use something else?



#8 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 09 April 2014 - 07:31 PM   Best Answer

I would need help to solve this as there are things going on in Firefox and IE. Probably the developer could update and change these rules:

 

Firefox: Now

 

.postpin {
    -moz-hyphens: auto;
    word-break: break-all;
}
 
break-all should be normal
 
IE 11
 
media all
.postpin {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    background: #f6f6f6;
    border: 1px solid #ffffff;
    margin: 8px 0;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
}
 
Not sure why two rules there but either break-all; or break-word; should be changed to normal 
 
Using both of these it fixed the problem. However, I am not clear on how to write Browser specific CSS. However....add this to your fallback CSS in wp-admin > Pagelines
 
.postpin {
    word-break: normal;
}
 
And it solves the problem :phew:

  • jane likes this

#9 imagineutopia

imagineutopia

    Advocate

  • Members

  • 276 posts
  • LocationKansas City
  • Country: Country Flag

Posted 09 April 2014 - 08:47 PM

ok, that seems to be fixing it.

 

 

thanks,



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15215 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 April 2014 - 10:15 AM

Ive reported this to our tracker.


  • GetMeWebDesign likes this





Also tagged with one or more of these keywords: PostPins