Why the btn and the h1 still at the same line?

Question

I want that the button of play again and the h1 will be in different lines. How can I do it?

<div class="winner">
  <h1 class="won">You Won!</h1>
  <button class="again">Play Again!</button>
</div>

.winner {
  background-color: #9792e3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
}
.won {
  color: #e85f5c;
  font-family: "Anton", sans-serif;
  font-size: 3rem;
}
.again {
  display: block;
  border-radius: 5px;
}

Here is the image:

You have problem with `.winner` css, because you making `button` into `
` and in `.winner` have a `display: flex;` code — Adhitya, Nov 29 '20 at 08:48
then how can I fix it, I set again class to block, sry if I ask stupid questions I'm just new to this stuff — or dalal, Nov 29 '20 at 08:54

Nikas music and gaming · Accepted Answer · 2020-12-03T06:40:13.903

.winner {
  background-color: #9792e3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
}
.won {
  color: #e85f5c;
  font-family: "Anton", sans-serif;
  font-size: 3rem;
}
.again-div {
  display: block;
  border-radius: 5px;
}

<div class="winner">
<h1 class="won">You Won!</h1>
<button class="again">Play Again!</button>
</div>

Add flex-direction: column;

score 0 · Answer 2 · answered Nov 29 '20 at 09:09

You are using Flex which has the default direction vale as a row due to which it is showing in the same line, either you can remove the display flex property or change its direction to the column. here my modified code where I removed the flex property.

code

            <div class="winner">
            <h1 class="won">You Won!</h1>
            <button class="again">Play Again!</button>
            </div>  

            .winner {
                background-color: #9792e3;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                transform: translateY(-100%);
            }
            .won {
                color: #e85f5c;
                font-family: "Anton", sans-serif;
                font-size: 3rem;
            }
            .again {
                display: block;
                border-radius: 5px;
            }

Why the btn and the h1 still at the same line?

2 Answers2