React CSS-HTML align center with flex and image not showing small device-CodePudding

I am working on building a website using react and I've come into a problem centering element on left on right vertically, that has been bothering me for a few days now I haven't been able to fix it.

I have a div that contains 2 elements, 1 on the left and one on the right.

.whatbdh_content-bottom {
  background: #eee;
  display: flex;
  flex-direction: row;
  padding: 2rem;
}

.whatbdh_content_left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 2rem;
  margin-right: 2rem;
}

.whatbdh_content-grid {
  max-width: 1140px;
  margin: auto;
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(2, 1fr);
}

.card {
  text-align: center;
  padding: 1rem;
  border: 1px solid #000;
  color: #000;
}

.whatbdh_content_right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5rem;
}

.whatbdh_content_right svg,
img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

@media screen and (max-width: 640px) {
  .whatbdh_section {
    flex-direction: column;
    margin: 0 0 3rem;
  }
}

@media screen and (max-width: 980px) {
  .whatbdh_content-grid {
    max-width: 90%;
    margin: auto;
    grid-template-columns: 1fr;
  }
}

<div className='whatbdh_content-bottom'>
  <div className='whatbdh_content_left'>
    <h1 className='title_text'>Not the best title right now</h1>
    <div className='whatbdh_content-grid'>
      <div className='card'>
        <p>We will show up</p>
      </div>
      <div className='card'>
        <p>We will show up <br />okay</p>
      </div>
      <div className='card'>
        <p>We will show up <br />okay</p>
      </div>
      <div className='card'>
        <p>We will never show up, <br /> okay </p>
      </div>
    </div>
  </div>
  <div className='whatbdh_content_right'>
    <img src={arrow2}/>
  </div>
</div>

Basically I would like my left and right content to be horizontally aligned and also I am not sure why when I use small screen my image does not show up anymore. Thanks in advance

CodePudding user response：

Two parts in the CSS code are causing this issue:

This part:

.whatbdh_content_right{
flex:1;
display: flex;
justify-content: center;
align-items: center;
margin: 5rem; <<== HERE
}

And this part:

.whatbdh_content_right svg, img{
max-width: 100%; <<== HERE
height: auto;
max-height: 100%;

@media screen and (max-width: 640px) {
    .whatbdh_section{
        flex-direction: column;
        margin: 0 0 3rem;
    }

}

@media screen and (max-width: 980px) {
    .whatbdh_content-grid {
        max-width: 90%;
        margin: auto;
        grid-template-columns: 1fr;
    }
}
}

The first one defines the margin of the image to be 5rem horizontally (and vertically), this means that its full width (100%) will be constrained by the width of the grid to its left.

The second section places another constraint on the image; such that it will not be able to expand its width above 100% of its assigned width.

Meaning that, as the screen width gets smaller, the grid will take a larger portion of the screen, leaving a small room for the image (given the constant margins), which makes the image disappear since it is not allowed to expand its size above the 100% limit (caused by the second part).

To solve this, you can either: reduce the margins of the .whatbdh_content_right (the first CSS part), reduce the size taken up by the grid and the text on the left, or allow the image to resize beyond the 100% limit (by removing that from the second CSS part).