Text displaying differently and more condense on different mobile devices?

Hi,

Im having some issues when viewing the site on different devices? specifically with the font / text displaying squashed on iphone?

e.g. on this page - *URL(S) REMOVED*

when viewed on Samsung Note 4 - Firefox looks like
- http://i57.tinypic.com/25zlc2q.png
when viewed on Samsung Note 4 - Chrome looks like
- http://i62.tinypic.com/eq740k.png
when viewed on Apple IPhone 6 - Chrome Browser
- http://i59.tinypic.com/11ccupg.jpg

Thanks

Tom

  • Jude

    Hi there @Tom

    Here is some CSS that specifically targets the iPhones and devices with similar screens

    @media only screen
        and (min-device-width : 375px)
        and (max-device-width : 667px)
        and (orientation : landscape)
        and (-webkit-min-device-pixel-ratio : 2)
    {
    body.page-id-205 .content-area .page .entry-content p, body.page-id-9 .content-area .page .entry-content p, body.page-id-11 .content-area .page .entry-content p, body.page-id-9 .content-area .page .entry-content h5, body.page-id-11 .content-area .page .entry-content h5 {
     padding: 0 2% !important;
     text-align: justify;
    }
    }
    
    @media only screen
        and (min-device-width : 375px)
        and (max-device-width : 667px)
        and (orientation : portrait)
        and (-webkit-min-device-pixel-ratio : 2)
    {
    body.page-id-205 .content-area .page .entry-content p, body.page-id-9 .content-area .page .entry-content p, body.page-id-11 .content-area .page .entry-content p, body.page-id-9 .content-area .page .entry-content h5, body.page-id-11 .content-area .page .entry-content h5 {
     padding: 0 2% !important;
     text-align: justify;
    }
     }

    Although !important is not recommended its needed here because the parent CSS uses this.

    Can you add this CSS and see if it works fine

    Cheers
    Jude

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.