Why does font-size not appear to affect my buttons that I have created? [duplicate]

Question

I am making a game of chess, and have five buttons for if you resign, if you draw, and to reset the game. However, I want them to appear bigger, and the css I have is not doing that. I have tried using font-size: 3rem;, but that does not appear to work.

Here is my HTML:

div.buttons {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}

<div class="buttons">
    <button>Resign for White</button>
    <button>Resign for Black</button>
    <button>Offer Draw</button>
    <button>Accept Draw</button>
    <button>RESET GAME</button>
</div>

the browser apply a default font-size to button

Temani Afif
– Temani Afif

2021-05-20 07:53:00 +00:00
Commented May 20, 2021 at 7:53 — Temani Afif
– Temani Afif, Commented May 20, 2021 at 7:53

Jax-p · Accepted Answer · 2021-05-20 07:48:50Z

3

Because button has its own font-size (13px in my Chrome instead of inherit) and you are targeting only parent div.

div.buttons {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}
div.buttons button {
    font-size: inherit;
}

<div class="buttons">
    <button>Resign for White</button>
    <button>Resign for Black</button>
    <button>Offer Draw</button>
    <button>Accept Draw</button>
    <button>RESET GAME</button>
</div>

or you can set font-size directly to button:

div.buttons {
    display: flex;
    justify-content: center;
}
div.buttons button {
    font-size: 3rem;
}

<div class="buttons">
    <button>Resign for White</button>
    <button>Resign for Black</button>
    <button>Offer Draw</button>
    <button>Accept Draw</button>
    <button>RESET GAME</button>
</div>

answered May 20, 2021 at 7:48

Jax-p

8,8246 gold badges35 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antonio Petricca · Accepted Answer · 2021-05-20 07:49:15Z

2

Your CSS is wrong, you have to fix it like follow:

div button {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}

<div>
    <button>Resign for White</button>
    <button>Resign for Black</button>
    <button>Offer Draw</button>
    <button>Accept Draw</button>
    <button>RESET GAME</button>
</div>

answered May 20, 2021 at 7:49

Antonio Petricca

11.3k6 gold badges47 silver badges91 bronze badges

Comments

Sabih Ali · Accepted Answer · 2021-05-20 07:52:05Z

2

.buttons {
    display: flex;
    justify-content: center;
}

.buttons  button {
    font-size: 3rem;
}

<div class="buttons">
    <button>Resign for White</button>
    <button>Resign for Black</button>
    <button>Offer Draw</button>
    <button>Accept Draw</button>
    <button>RESET GAME</button>
</div>

answered May 20, 2021 at 7:52

Sabih Ali

812 bronze badges

Collectives™ on Stack Overflow

Why does font-size not appear to affect my buttons that I have created? [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related