1

The image for my GBA website is overlapping the box and I don't know how to fix it. I want the image to fit perfectly in the middle of the box, but I can't figure it out. I think it might have something to do with the margin or something else in the CSS.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.shell {
  height: 65vh;
  justify-content: center;
  display: flex;
  flex-direction: row;
  flex-basis: auto;
  margin: 5px 20px;
  align-items: center;
  /* Added */
  flex-wrap: wrap;
}

.gameshell {
  height: auto;
  justify-content: center;
  display: flex;
  gap: 2rem;
  /*newly added*/
  margin: 2rem 20px;
  align-items: center;
  /* Added */
  flex-wrap: wrap;
}

.card {
  display: inline-block;
  width: 200px;
  height: 160px;
  border: 1px solid #EF9A9A;
  border-radius: 4px;
  margin: 5px;
  text-decoration: none;
}

.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border-bottom: 1px solid #EF9A9A;
  background-color: #FFEBEE;
  padding: 5px 10px;
}

.card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}
<div class="shell">
  <a href="#" class="card">
    <div class="card-header">Pokemon Emerald</div>
    <div class="card-main">
      <img src="https://via.placeholder.com/100" alt="retrobowlicon" width="80" height="80">
      <div class="main-description"></div>
    </div>
  </a>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • You've set a fixed card height but haven't done anything to resize the image to fit. – isherwood Oct 26 '22 at 13:33
  • Notice for next time how I 've reduced your code to just what's relevant to this question, and there's no reason to show a screenshot if the demo shows the problem. – isherwood Oct 26 '22 at 13:37

0 Answers0