What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Why font-size jumps from very small to very large when I change px or rem?


New member
Hi everyone, I'm new here. I have a problem, I am building a mobile first website. Here is the problem. Let's say I have a container with a H3 and a paragraph. When I set the size of the paragraph let's say to 20 or 25 px (or 1.5, 1.7 rem), the paragraph remains very little, but when I change it to 30 px or 2rem it becomes very large, like there's no intermediate size. Why?
Here the html and css
I also saw that in the inspector the root size is striked through. How come? The page is empty, there's nothing overriding it.
Thank you very much!

<div class="seguicisui">

      <div class="suisocial">
        <h3 class="titleseguici">Seguici sui social</h3>
        <p class="nonperdertistorie">Non perderti nuove storie e nuovi pelosetti da adottare</p>

      <div class="facebookandinstagram">
        <div class="facebook">
          <img src="#" alt="icona facebook">

        <div class="instagram">
          <img src="#" alt="icona instagram">
.seguicisui {
  width: 95vw;
  margin: auto;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Varela Round', sans-serif;
  text-align: center;

.titleseguici {
  width: 95vw;
  margin: auto;
  font-size: 3.7rem;
  margin-bottom: 10px;

.nonperdertistorie {
  width: inherit;
  font-size: 30px;

.facebook {
  text-align: center;
  font-size: 25px;

.instagram {
  text-align: center;
  font-size: 25px;