Html Question posted in
Some basic documentation can be found here.

Html – I need help giving more spacing between the logo and login/register buttons

I’m remaking a dying online game and I need some help with a bit of my code.

.player-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  /* Space between the buttons */
  margin-top: 100px;
  width: 100%;
}

#newPlayerButton,
#returningPlayerButton {
  height: 100px;
  display: inline-block;
  text-align: center;
  line-height: 150px;
  font-size: 16px;
  /* Initially hide the buttons */
  opacity: 0;
  transform: scale(0);
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
<!-- Logo that will zoom in -->
<div id="logo-container">
  <img id="game-logo" src="/svgs/old login page stuf/shapes/299.svg" alt="Game Logo">
  <!-- Replace with your logo SVG -->
  <img id="game-logo2" src="/svgs/old login page stuf/shapes/299 copy.svg" alt="Game Logo">
</div>

<!-- New Player and Returning Player buttons that will zoom in after the logo -->

<div id="player-selection">
  <div id="newPlayerButton">
    New Player
  </div>
  <div id="returningPlayerButton">
    Returning Player
  </div>
</div>

<!-- JavaScript to control animations -->
<script src="app.js"></script>

And here’s what happens when I change the margin:

original:

.player-selection {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Space between the buttons */
    margin-top: 50px; /* Adjust this value to create space between the logo and buttons */
    width: 100%;
}

#newPlayerButton, #returningPlayerButton {
    height: 100px;
    display: inline-block;
    text-align: center;
    line-height: 150px;
    font-size: 16px;

    /* Initially hide the buttons */
    opacity: 0;
    transform: scale(0);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

As you can see margin-top is set to 50px. Here’s what happens when ran:

enter image description here

And when its 100px…

enter image description here

nothing.

No matter how much I change the margin-top, it doesn’t move away from the logo. How do I fix this?

Tags:

2

Answers


  1. 0

    .player-selection is a class selector, but the element you’re targeting is <div id="player-selection">, which uses player-selection as an ID, not a class.

    You could either :

    1. Change .player-selection {...} in your css to #player-selection {...}, or
    2. Change <div id="player-selection"> to <div class="player-selection">

    MDN Reference

    Login or Signup to reply.
  2. 0

    Replace .player-selection to #player-selection. . is for classes, # is for IDs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search