Letter Spacing different between PC , Andriod and Ios

colinashvin
Excursionist
30 0 9

I am facing a change in my letter spacing when i view my website on PC/Andriod/IOS.

 

The target is the (Brighter teeth in 30 seconds) title. 

The code renders letter spacing off -1 pn the title :

h1 {
font-weight: 600 !important;
letter-spacing: -1px !important;

}

 

The middle picture, (PC) represents what the proper spacing look like.

For Andriod, the letter spacing seems to be getting smaller pushing the letters together

For IOS. the letter spacing seems to be getting bigger.

 

I have tried using 

body {
-webkit-font-smoothing: antialiased !important;
text-rendering:optimizeLegibility !important;
-webkit-text-size-adjust: 100%;

}

 

but the difference isn't there, the code is extensive so if any additional information is needed do let me know and I will provide them.

 

Thanks,

Sahel Wahdain

 

IOSIOSPCPCAndriodAndriod

Replies 3 (3)

PageFly-Richard
Shopify Partner
4272 969 1620

Hi @Colinashvin

 

I am Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendations.

 

You can use the following code snippets:

@media (max-width:767px){

     CSS for mobile

}

@media not all and (min-resolution:.001dpcm)

{ @supports (-webkit-appearance:none) {

    @media (max-width:767px){

      CSS for mobile ios

    }

}}

 

Best Regards;

Richard-pagefly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

colinashvin
Excursionist
30 0 9

Hello Richard,

 

I am assuming I use the code in my CSS file, The CSS in question here is the letter-spacing.

 

I have tried using your code to add letterspacing on both the normal version and the "IOS" version but it didn't solve my problem.

 

PageFly-Richard
Shopify Partner
4272 969 1620

Hi  Colinashvin,

Can you give me access store and I will check and add it for you

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.