CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexboxbootstrap-4
Vladimir Panchenko
Vladimir Panchenko

Reputation: 1193

Flexbox div is hidden on a small screen

I have the following code which uses Bootstrap 4. My CSS is basically a copy of Bootstrap Sign In Form Example.

The main difference is that I have a video element in a div that provides border and 1:1 ratio.

The issue is that on small displays (e.g. on mobile) the first div is not shown at all, and at least half of the second div with video is hidden too. You can resize your browser window to see it.

How can I fix it? I have margin: auto but seems that it doesn't help at all.

:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-ordercode {
  width: 100%;
  max-width: 420px;
  padding: 15px;
  margin: auto;
}

.form-ordercode .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

</head>

<body>
  <div class="container">

    <form action="/" class="form-ordercode" method="post">
      <div class="text-center mb-4">
        <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
        <h1 class="h3 mb-3 font-weight-normal">First line</h1>
      </div>
      <div class="form-control embed-responsive embed-responsive-1by1">
        <video id="preview" class="embed-responsive-item"></video>
      </div>
      <div class="text-center mb-4">
        <h1 class="h4 mb-3 font-weight-normal">Second line</h1>
      </div>
      <div>
        <input class="form-control" placeholder="Order Nbr" type="text" value="" />
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">
                Submit
            </button>
    </form>
  </div>

</body>

</html>

Upvotes: 1

Views: 1260

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

This happens because the body is display:flex to allow for centering of the form. Just change the CSS to make the body min-height: 100%; ...

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

https://www.codeply.com/go/wPQufVxhe8

Upvotes: 1

Related Questions