Why are my react-bootstrap rows overlapping on mobile?

Question

I am trying to style a Container on mobile, and the contents are overlapping. They look great on desktop, but the Container loses it's height and starts overlapping the contents once it loads on mobile. I've tried so many combinations of margins, heights, paddings, etc and I can't get it to work properly.

Here's my relevant React component. It contains the entire container plus each item.

<Container fluid
        onClick={handleRedeemClick}
        className="total-services-sold"
      >
        <Row fluid>
          <Col><a className="total-services-sold-num">{props.profile.menu_items.length}</a></Col>
        </Row>
        <Row fluid>
          <Col><a className="services-sold">Services Sold</a></Col>
        </Row>
        <div className="seperator"></div>
        <Row fluid>
          <Col className="new-link">Redeem Sales</Col>
        </Row>
      </Container>

And here's the CSS

.total-services-sold {
  /* position: absolute; */
  display: flex;
  flex-direction: column;
  /*justify-content: flex-end;*/
  align-items: center;
  width: calc(100% - 32px);
  height: auto;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.13);
  margin: 40px 0;
}

.total-services-sold-num {
  font-family: "Roboto";
  font-style: bold;
  font-weight: 500;
  font-size: 30px;
  line-height: 35px;
  color: #000000;
  padding-top: 8px;
  margin-bottom: 0px;
  border: 1px solid #ff0000;
  position: relative;
}

.services-sold{
  font-family: 'roboto';
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  padding-top: 0px;
  margin-top: 0px;
  padding-bottom: 8px;
  border: 1px solid #ff0000;
  position: relative;
}

.new-link {
  font-family: "Roboto";
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  /* identical to box height, or 137% */

  text-align: center;

  color: #6161ff;
  padding-top:12px;
  padding-bottom:4px;
  position:relative;
}

.seperator {
  width: 100%;
  border: 1px solid #f2f2f2;
  margin-top: 8px;
  position:relative;
}

Any advice is greatly appreciated.

Answer 1

Firstly, if you're using bootstrap, you might as well make use of reactstrap classes and spare yourself the hideous CSS writing.

In your total-services-sold add justify-content: space-between as well as min-height: 200px . Also drop the position:relative attribute in your child divs.