How to keep block expanding to fill viewport?

Question

I have a white box I'm using to make a word game. When I adjust my browser window to make the viewport smaller, the box doesn't move to the center and shrink, it almost slides.

I'd like it to work like Wordle because the grid stays constant even if you shrink the browser.

Can anyone help with what CSS positioning I'm doing incorrectly?

* {
  padding:0;
  margin:0;
}

body{
  margin: 0;
  padding: 0;
  font-family: 'Figtree', sans-serif;
  font-family: 'Inter', sans-serif;
  font-family: 'Montserrat', sans-serif;
  background: #212529;
}

.wrapper{
  margin-top: 120px;
  align-content: center;
  position: fixed;
  left:400px;
  padding: 0px 80px;
  background: white; opacity: 1;
  border-radius: 10px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.5);
  max-width: 500px;
  max-height: 500px;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
  </head>
  <body>
    <div class="wrapper">
      <div class="content">
        <div class="guesses-text">0/10</div>
          <hr class="bum">
          <div class="inputs">
          <input type="text" class="exterior-letters">
          <input type="text" class="interior-letters">
          <input type="text" class="interior-letters">
          <input type="text" class="interior-letters">
          <input type="text" class="exterior-letters">
        </div>
      </div>
    </div>
  </body>
</html>

I have tried using "display: flex;" and other methods but none have worked.

Could you fix your CSS file please, so I can replicate what you are trying to do. Thank you! — Finlay, Aug 11 '23 at 18:54
Hello. I'm sorry this is my first time using Stack Overflow. What do you mean fix my CSS file? — , Aug 11 '23 at 18:56

score 1 · Answer 1 · edited Aug 11 '23 at 19:20

Try not to use position fixed as it works with respect to viewport and it overrides everything on the page. That's why I removed the position: fixed; and left: 400px; properties from the .wrapper class. These properties were causing the sliding behaviour.

I added display: flex;, flex-direction: column;, align-items: center;, and justify-content: center; to the .wrapper class. This will center the content both vertically and horizontally within the box.

* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Figtree', sans-serif;
  font-family: 'Inter', sans-serif;
  font-family: 'Montserrat', sans-serif;
  background: #212529;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 120px auto; /* Center vertically and horizontally */
  padding: 0px 80px;
  background: white;
  opacity: 1;
  border-radius: 10px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  max-width: 500px;
  max-height: 500px;
}

@media (max-width: 600px) {
  /* Adjust the breakpoint value as needed */
  .wrapper {
    padding: 20px;
  }
}

score 0 · Accepted Answer · edited Aug 11 '23 at 19:14

To make the box in the center of the page stay centred with any size of the browser, you can use Flexbox and adjust the CSS properties accordingly.

Here is the CSS that I modified to achieve results:

* {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Figtree', sans-serif;
    font-family: 'Inter', sans-serif;
    font-family: 'Montserrat', sans-serif;
    background: #212529;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.wrapper {
    padding: 0px 80px;
    background: white;
    opacity: 1;
    border-radius: 10px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    max-width: 500px;
    max-height: 500px;
}

I removed the fixed positioning, margin-top, and left properties from the .wrapper class. Instead, I applied flexbox properties to the body element to center the box both horizontally and vertically in the viewport. This way, the box will stay centred and scale with any size of the browser.

I am not a professional but here is one way of adjusting where it would lay in the center.

That was really nyc, copying my code. and post it right away — Rai Hassan, Aug 11 '23 at 19:19
No? I was working on that since I commented. We did it differently. Have a nice day! — Finlay, Aug 11 '23 at 19:21

How to keep block expanding to fill viewport?

2 Answers2