I have weird font bug

I used to modify free or paid WP themes, but now I decided to create my own theme from scratch and I have a problem...
The error ONLY happens on pages that use a grid template. But I use the same grid code and CSS on my old sites where I modified someone else's WP theme.

The bug ONLY happens in the phone browser, for example, in Chrome there is this crash, but not in Firefox. To see the error, you need to activate the PC mode in the phone browser. The font size remains the same as on PC, but other elements are reduced in size. Sometimes, after I refresh the screen, the font suddenly gets reduced, but not in all elements.

I added 100% to html and body, and the rest of font-size I changed to rem, but the problem has not disappeared.

I also have <meta name="viewport" content="width=device-width, initial-scale=1">

 

What is the website's url?

 

seofriendlydomains.com
I have a grid in categories and the homepage, and the text before grid looks big.
I remind the error appears ONLY on smartphones if you activate the PC mode in Chrome and Chrome-based browsers. Firefox displays everything correctly.

 

No one??

 

Since the bug only shows up in the phone browser, particularly when using PC mode, it could be related to how the CSS is being interpreted on mobile devices. Have you tried checking for any media queries or specific styles that might be affecting the grid layout under different screen resolutions? It might also help to inspect the elements in the browser’s developer tools to see if any conflicting styles are impacting the display.

 

It happens only with elements where the is used grid.
But when I used to modify somebody's else themes, I used the same grid and everything worked.

 

I tried to add font-size: 1rem and font-size: 100% to the grid, but it didn't help

 

I removed style.css and this is how I see the site.
Maybe this is my Chrome bug?

 

Pixels are fixed sizes. Did you try to use px instead of rem/em? 16px should do it.

 

I tried px, em, and rem.
But on the non-WP site, the same code works well.
The same code also works well on other WP themes I used to modify only.

 

If you're experiencing a weird font bug, it may stem from several issues. Here are some common causes and their solutions:

1. **Corrupted Fonts**: Fonts can become corrupted, causing display issues. Reinstalling the affected font can help.

2. **Software Compatibility**: Some applications may not support specific fonts. Ensure that the software you're using is compatible with the fonts you have installed.

3. **Browser Issues**: If the bug appears in a web browser, try clearing the cache and cookies. Disabling any extensions that might interfere with font rendering can also be beneficial.

4. **Operating System Settings**: Check your operating system's font settings. For Windows, use the Control Panel to manage fonts; for macOS, use Font Book.

5. **Display Drivers**: Outdated graphics drivers can cause rendering issues. Updating your drivers may resolve the problem.

 

1. Reinstalling where and how?
2. I have more sites, some of them WP and others just PHP+CSS+JS and I use there the same code and everything works.
3. I checked my other site with the same browser and they work correctly.
4. See point 3
5. See point 3

Why you just can't check the site on your browser?

perutouristguide.com
perutouristguide.com/category/blog/
perutouristguide.com/exploring-arequipa/

 

Solved!
I forgot to add-webkit-text-size-adjust: 100%;