CODEWITHSUNDEEP
react-bootstrapbootstrap-grid
TEbogo
TEbogo

Reputation: 229

React bootstrap columns leaving white space on ipad and ipad pro

I am building a website with react-bootstrap and the Ipad and Ipad pro leave a white space at the bottom of my columns. I have attached a screenshot to show the problem. I am not sure what is causing that white space at the bottom when I ma in Ipad mode. All the other devices are fine. screenshot of the space.here is my component and CSS:

  return (
    <Container fluid  className="about-us">
      <Row className="row row-about">
            <Col lg={6} className="text">
            <h1>WE ARE TECHON</h1>
            <h2>What we do</h2>
            <p>
              By providing user-focused digital solutions
              that intersect technology and innovation,
              we assisit start-ups and SMME's to have 
              the edge and take full advantage of the 
              digital age. Solving problems is our philosophy;
              motivationg us to use technology as a 
              tool to innovate and improve lives.
            </p>
            <h2>Why we do it</h2>
            <p>
             "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
             sed do eiusmod tempor incididunt ut labore et dolore magna
             aliqua. Ut enim ad minim veniam, quis nostrud exercitation
             ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit.
            </p>
        </Col>
        <Col lg={6} className="image">
            <Image className="about-img" src={require('../techOn.png')} style={{height:"100%", width: "100%"}} />
            </Col>
      </Row>
    </Container>
  );
}


.custom-nav {
  background-color: #11212b;
}
.custom-link {
  font-size: 20px;
  color: #12ffef !important;
  margin-left: 30px;
  text-decoration: none;
  text-align: right !important;
}
@media only screen and (max-width: 568px) {
  .custom-link {
    font-size: 15px;
    margin-left: 15px;
  }

  .nav {
    width: 110%;
  }
  .row {
    display: flex;
    flex-direction: column-reverse;
 }
 .story, .image {
    margin-top: 0;
    padding-top: 0;
 }
 .text {
    margin-left: 5px !important;
    font-size: 15px;
    text-align: left !important;
    margin-top: 0;
    padding-top: 0;
 }

}
.text {
  background-image: url("./techOn.png");
  color: rgb(195, 255, 249);
  margin: 20px 0px 0px 10px;
  text-align: justify;

}

.row-about {
    background-image: url("./techOn.png");
}

.row {
    display: flex;
}

@media only screen  and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait) {
       .custom-link {
    font-size: 15px;
    margin-left: 15px;
  }

  .nav {
    width: 100%;
  }
  .row {
    display: flex;
    flex-direction: column-reverse;
 }
  }

Upvotes: 0

Views: 231

Answers (1)

Jon Jones
Jon Jones

Reputation: 1084

Was there a reason you didn't apply the background style to class "about-us". The would probably fix it

You could also probably use a height=100vh on row-about

Upvotes: 1

Related Questions