HTML/CSS: The text is displayed in a reduced font size in the Chrome browser. How to disable this reducing?

Question

HTML/CSS: The text is displayed in a reduced font size in the Chrome browser. How to disable this reducing?

247 Views Asked by ViH At 17 April 2025 at 08:05

Please see the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">       
    <style>
        p {
           font-size: 16px;
        }
    </style>
</head>
<body>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!<button>Read more></button></p>
</body>
</html>

Why the second paragraph is displayed in reduced font-size? How to turn this reducing off?

I noticed that this problem is only in the Chrome browser on my phone with system text size L, XL or XXL. In the Opera and Mi browsers paragraphs no problems, paragraps look same.

Original Q&A

There are 3 best solutions below

**Abdelmoula Bilel** · Answer 1

you can just give it a class and change it the way you like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">       
    <style>
        p {
           font-size: 16px;
        }

        .second_p{
         font-size: 18px;  /*or 18 anything you want*/
       }
    </style>
</head>
<body>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!</p>
   <p class="second_p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!<button>Read more></button></p>
</body>
</html>

**Kannu Mandora** · Answer 2

Kannu Mandora On 05 June 2023 at 10:29

16px is already by default in the browser so, there is no use of using font-size: 16px; Try to use different font-size.

**Sarath O S** · Answer 3

If you are trying to give all the

elements a custom font size, you can simply style them the same as you did. You can try a different browser to see if the font-size issue is present there too. In this specific case, it's not necessary to give 16px as the font size since it's the default size.

HTML/CSS: The text is displayed in a reduced font size in the Chrome browser. How to disable this reducing?

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FONT-SIZE

Related Questions in FONT-SCALING

Trending Questions

Popular # Hahtags

Popular Questions