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

Html – Columns do not adjust with window size in flexbox due to images in them

I am trying to build a landing page that is split into two columns (currently unfinished). Each column contains an image and text. It displays perfectly fine when the window is full size, but any smaller than that and the page stops displaying as two columns. I want the page to display as two columns regardless of window size, and for the images to shrink and grow with the window so that they remain proportional. I have tried using max-height and max-width but neither have helped with this issue. However, when I remove the images, or try it with perfectly square images, this problem does not occur and the columns correctly resize themselves as the window resizes. Please see screenshots and code below.

Full Size Window view

Medium Window view

Smallest Window view

.center-img-half {
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 50%;
}

.center-div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

.black-white-button {
  background-color: black;
  color: white;
  border-radius: 10px;
  font-family: 'Cantata One', serif;
  padding: 10px;
}

.wrapper {
  background-color: white;
}

.login-column1 {
  background-color: lightgray;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100vh;
}

.login-column2 {
  background-color: white;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100vh;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
<div class="wrapper">
  <div class="row">
    <div class="login-column1">
      <div class="center-img-half">
        <img src="https://via.placeholder.com/300x300" />
      </div>
      <div class="center-div">
        <h2>Log in to your chess </h2>
      </div>
      <div class="center-div">
        <h4>Log in with your email and password to access your account.</h4>
      </div>
    </div>
    <div class="login-column2">
      <div class="center-img-half">
        <img src="https://via.placeholder.com/600x200" alt="Chess Pal Logo" />
      </div>
      <div class="center-div">
        <h2> Log in to your account </h2>
      </div>
      <div class="center-div">
        <Button class="black-white-button">Log In</Button>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Use dynamic width to your columns

    To always maintain the two columns display, you can set the width of both to 0, this property with the flex-grow: 1 to each (already applied when you used flex: 1) will ensure that the screen will be divided in two columns of the same width value! So, basically apply this to your columns:

      width: 0;
  flex-grow: 1; (or flex: 1)

    For the images, you can put them inside a div container and set a width based on a percentage value, so it will maintain the proportion.

    Edit: For the image you can use something as width: 100% to your center-img-half class (or another value that you desire)

    Login or Signup to reply.
  2. 0

    Is this desired outcome?

    body{ /* This is just my guess, i don't know what your body should be styled as */
    height: 100vh;
    padding: 0;
    margin: 0;
}

.center-img-half {
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 50%;
  }
  
  .center-div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
  }
  
  .black-white-button {
    background-color: black;
    color: white;
    border-radius: 10px;
    font-family: 'Cantata One', serif;
    padding: 10px;
  }
  
  .wrapper {
    background-color: white;
    height: 100%;
  }

  .login-column1,
  .login-column2 {
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
    min-width: 0;
  }

  .row {
    display: flex;
    height: 100%;
    justify-content: space-between;
  }
  
  .login-column1 {
    background-color: lightgray;
  }
  
  .login-column2 {
    background-color: white;
  }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
<div class="wrapper">
    <div class="row">
        <div class="login-column1">
        <div class="center-img-half">
            <img src="https://via.placeholder.com/300x300" />
        </div>
        <div class="center-div">
            <h2>Log in to your chess </h2>
        </div>
        <div class="center-div">
            <h4>Log in with your email and password to access your account.</h4>
        </div>
        </div>
        <div class="login-column2">
        <div class="center-img-half">
            <img src="https://via.placeholder.com/600x200" alt="Chess Pal Logo" />
        </div>
        <div class="center-div">
            <h2> Log in to your account </h2>
        </div>
        <div class="center-div">
            <Button class="black-white-button">Log In</Button>
        </div>
        </div>
    </div>
</div>
</body>
</html>

    Focus is on the following selectors:

      .login-column1,
  .login-column2 {
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
    min-width: 0;
  }

  .row {
    display: flex;
    height: 100%;
    justify-content: space-between;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search