Why does the image within the box shrink upwards when the window shrinks?

April 7, 2022

I really don’t know what I’m doing wrong here. I want the image inside the box to stay centered when the window shrinks. Furthermore, I would have thought that align-items: center; would work, but apparently not. The colors are only relevant for me, so I understand what’s going on. I don’t know if there is a solution for this either, but I hope so. And please ignore the naming and order of the individual classes, I couldn’t do better …:)

.megadiv {
  max-width: 1600px;
  margin: auto;
  text-align: center;
}

.centerbox {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 64%;
  background-color: red;
  justify-content: space-between;
  border: 2px solid gray;
  display: flex;
}

.insideleft {
  width: 20%;
  background-color: yellow;
  align-items: center;
  text-align: center;
  align-content: center;
}

.insideright {
  width: 78%;
  background-color: purple;
  float: right;
  padding-top: 2%;
  text-align: left;
  border-left: 2px ridge #ffa54f;
  padding-left: 2%;
  padding-bottom: 1%;
}

.picture {
  width: 80%;
  border-radius: 1%;
  margin-top: 10%;
  margin-bottom: 8%;
}

.right {
  width: 34%;
  border: 2px solid gray;
  height: 20px;
}

h7 {
  color: rgb(0, 153, 158);
  font-size: large;
  font-family: sans-serif;
}

.textpart {
  margin-bottom: 0.5%;
}

<div class="megadiv">
  <div class="centerbox">
    <div class="left">
      <div class="insideleft">
        <h20>
          <a href="">
            <img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
        </h20>
      </div>
      <div class="insideright">
        <h7><a href="">Headline</a></h7><br>
        <h4>
          <div class="textpart">Authors</div>
          <div class="textpart">Views <a class="" href="">Chapter 2</a></div>
          <div class="textpart">Genres: Action - Adventure - Comedy</div>
          <div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
        </h4>
      </div>
      <div class="right">
        wawaeaweew
      </div>
    </div>
  </div>

h4 and h20 are empty

>Solution :

You’re pretty close to getting the image vertically aligned as you wanted. Try this out, and see if this works the way you would like:

.megadiv {
  max-width: 1600px;
  margin: auto;
  text-align: center;
}

.centerbox {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 64%;
  background-color: red;
  justify-content: space-between;
  border: 2px solid gray;
  display: flex;
}

.insideleft {
  display: flex;
  width: 20%;
  background-color: yellow;
  align-items: center;
  text-align: center;
  align-content: center;
}

.insideright {
  width: 78%;
  background-color: purple;
  float: right;
  padding-top: 2%;
  text-align: left;
  border-left: 2px ridge #ffa54f;
  padding-left: 2%;
  padding-bottom: 1%;
}

.picture {
  width: 80%;
  border-radius: 1%;
  margin-top: 10%;
  margin-bottom: 8%;
}

.right {
  width: 34%;
  border: 2px solid gray;
  height: 20px;
}

h7 {
  color: rgb(0, 153, 158);
  font-size: large;
  font-family: sans-serif;
}

.textpart {
  margin-bottom: 0.5%;
}

<div class="megadiv">
  <div class="centerbox">
    <div class="left">
      <div class="insideleft">
          <a href="">
            <img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
      </div>
      <div class="insideright">
        <h7><a href="">Headline</a></h7><br>
        <h4>
          <div class="textpart">Authors</div>
          <div class="textpart">Views <a class="" href="">Chapter 2</a></div>
          <div class="textpart">Genres: Action - Adventure - Comedy</div>
          <div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
        </h4>
      </div>
      <div class="right">
        wawaeaweew
      </div>
    </div>
  </div>

I saw you used align-items: center; in the .insideleft CSS selector which is for aligning a container’s children to the center like you want, you’ll just want to make this a flexbox to make this work. To do this, simply add display: flex; to the .insideleft selector like in the example. I also removed the <h20> tag from the HTML as this is not valid or necessary.

As for the image shrinking down when the screen width is shrinked – this is because you’re using percentages for the widths for all the containers and the image. If you want the image to stop shrinking after a certain point, you can add min-width: 80px; /* (this can be any number of pixels) */ to your .picture selector to make the image stop shrinking once it gets to a certain width of pixels.

Flexbox is super useful for position elements in CSS and I’d recommend looking into this more to have a better understanding. Check out this link here if you’d like an overview of the different flexbox CSS properties.