My text size changes every time I refresh the page on android Chrome-CodePudding

I have a problem with certain CSS applied to my website. I use some CSS to set the color, size and alignment of text. It works fine on the desktop browser, everything looks how it is supposed to be. The problem happens only when I load the page on my android chrome. At certain times it shows the CSS properly, but after I refresh it, the text becomes much smaller. Yet, some other text on the page that uses the exact same CSS does not change at all.

Note that the following CSS property is only applied to a mobile phone screen size. I use the CSS Media Queries to do so.

Here's the CSS I am applying:

.list {
  color: white;
  padding: none;
  display: block;
  margin-left: 0px;
  margin-right: 10px;
  text-align: left;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-size: 100%;
}

It also happens with some other CSS on the page. It keeps on changing upon refreshing the page.

Please do provide me with some help. Thank you.

CodePudding user response：

The main reason is that you are using % try rem. You may need to do mobile queries for font sizes on other screen types.

font-size: 100%;

change to:

font-size: 1.8rem;

This could be too big

CodePudding user response：

Because you're using a percentage for font size, it's based on the size of the parent container. A better approach is to use rem or px. Here's a nice article explaining all of your options