Question 182629 in Html Question posted in
Some basic documentation can be found here.

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

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>

enter image description here

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.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search