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

Html – How to keep block expanding to fill viewport?

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.

Tags:

2

Answers


  1. 0

    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;
  }
}
    Login or Signup to reply.
  2. 0

    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.

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

Back To Top
Search