How to fix this font size?

1

hello everyone
i made simple counter with js i set the font-size to 3rem
but after you press on (+) or ( - ) the font-size of the number resize smaller
and also the height of the window changing…
how to fix that so it will be static after i apply the function on the number?
link to the code: https://repl.it/@AlexGordienko/counterjs
thanks :slight_smile:

2

Hey,

To find you what is happening, take a look at you source code in the browser when you click “+” or “-” see what changes in the #num div. Let me know if you’re still having problems with it!

3

the size is chaning but i don’t know why…i tried to look at the source code on the webrowser on the #num / h1 and can’t get why it happens…
could you look at it please? thanks.

4

So when the button is pressed, instead of changing the <h1> Element, it changed the <div> wrapper of the <h1> that causes it to change in size. You can fix this by Adding an id inside the <h1> element

<div id="num"><h1 id="number">0</h1></div>

and then change the num into number here:

if(increase){
        count++;
        num.innerHTML=count;
     }

becomes

if(increase){
        count++;
        number.innerHTML=count;
     }

Or another approach is to ditch the id on the div and put it inside the h1 tag

<div><h1 id="num">0</h1></div>
1 Like
5

Greetings @alexgordienko1993,

Use <p></p> instead of <h1></h1> .

<div id="num"><p>0</p></div>

div #num {
  display: flex;
  justify-content: center;
  padding: 50px;
  font-size: 3em;
}
1 Like
6

lol, thats worked hahaa can’t belive that’s was the problem to cause it
i spent over 2hours on this because i tought it was something with the width/height/size

thank you!