Letter Spacing different between PC , Andriod and Ios

Store Design
1

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

IOS
IOS281×525 19.5 KB

PC
PC563×481 19 KB

Andriod
Andriod511×1080 30.7 KB

2

Hi [email removed]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

3

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.

4

Hi Colinashvin,

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