CODEWITHSUNDEEP
cssbutton
VaclavJirka
VaclavJirka

Reputation: 39

How to avoid overlapping elements when window is resized?

I'm trying to style my website with CSS. But I have one problem. When When I resize the window, the buttons begin to overlap, instead of moving to the left and having the same gap between them.

What does it look like when I have a fullscreen window: enter image description here

What happens when I reduce the width of a window: enter image description here

What do I want to happen when I reduce the width of the window (I want them to always have the same gap between them, I changed the CSS code manually here, I want it to happen automatically) : enter image description here

My CSS code:

.login-button {
    background-color: white;
    border: none;
    color: black;
    padding: 1%;
    text-align: center;
    display: inline-block;
    font-size: 120%;
    border-radius: 12px;
    position: absolute;
    left: 75%;
    top: 7%;
    transform: translate(-50%,-50%);
    font-family: 'Quicksand', sans-serif;
    font-weight: 650;
}

.signup-button {
    background-color: white;
    border: none;
    color: black;
    padding: 1%;
    text-align: center;
    display: inline-block;
    font-size: 120%;
    border-radius: 12px;
    position: absolute;
    left: 90%;
    top: 7%;
    transform: translate(-50%,-50%);
    font-family: 'Quicksand', sans-serif;
    font-weight: 670;
}

.description {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-50%);
    color: white;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 7vw;
    white-space: nowrap;
}
.description2 {
    color: white;
    font-family: 'Quicksand', sans-serif;
    font-weight: 670;
    font-size: 1.7vw;
    position: absolute;
    left: 8%;
    top: 70%;
}

Upvotes: 0

Views: 1955

Answers (2)

VaclavJirka
VaclavJirka

Reputation: 39

I solved it by adding float: right and margin-left: 3%instead of position: absolute

Upvotes: 0

DonSeverino
DonSeverino

Reputation: 121

We can't see your HTML, but I'm going to suggest avoid using position: absolute for that situation.

Try something like this:

<div class="row">
  <div class="logo">Bubblio</div>
  <ul class="buttons">
    <li>
      <a href="/login" class="login">Login</a>
    </li>
    <li>
      <a href="/signup" class="signup">Signup</a>
    </li>
  </ul>
</div>

With this css for positioning:

.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

ul {
  display: flex;
  list-style: none;
}

li {
  margin-right: 16px;
}

a {
  text-decoration: none;
}

I'd recommend watching some Youtube tutorials on using Flexbox: display: flex. It works wonders in these situations putting all elements side by side and then spacing them easily as you need with justify-content. Use right or left margins on your elements to give them space.

Upvotes: 1

Related Questions