Flexbox div is hidden on a small screen
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.
margin: auto
: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>
default setting of flex is causing this issue on resize .check this link for more details - stackoverflow.com/questions/36247140/…
– Naga Sai A
Jun 30 at 18:43
1 Answer
1
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%; ...
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
You are my savior! Works like a charm.
– Vladimir Panchenko
Jun 30 at 22:04
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
remove display:flex on body element , you will see both the divs - codepen.io/nagasai/pen/dKaGmy
– Naga Sai A
Jun 30 at 18:40