Почему мои строки response- bootstrap перекрываются на мобильном устройстве?

Question

Я пытаюсь стилизовать контейнер на мобильном устройстве, и его содержимое перекрывается. Они отлично смотрятся на рабочем столе, но контейнер теряет высоту и начинает перекрывать содержимое после загрузки на мобильном устройстве. Я пробовал так много комбинаций полей, высоты, отступов и т. Д. c, и я не могу заставить его работать должным образом.

Вот мой соответствующий компонент React. Он содержит весь контейнер плюс каждый элемент.

<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>

А вот 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;
}

Любые советы приветствуются.

Answer 1

Во-первых, если вы используете bootstrap, вы можете также использовать классы reactstrap и избавить себя от ужасного письма CSS.

В вашем total-services-sold добавьте justify-content: space-between, а также min-height: 200px. Также удалите атрибут position:relative в дочерних div.