When in landscape orientation, I'm facing an issue with the vertical alignment being centered (card in the middle of the screen), which cuts off various elements like my logo image...
The "problem" lies in the h-100 class of the MAIN tag, as well as the CONTAINER and ROW...
However, I am unsure why this issue occurs specifically in this orientation, considering that I am following the bootstrap documentation. The only solution I can think of is using @media queries, but this might disrupt other resolutions on notebooks and computers...
What steps should I take to address this problem and what is causing it in the first place?
CSS:
html,
body { height: 100%; }
HTML:
<main class="h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="card mx-auto d-block shadow-md-large w-md-80 w-lg-50">
<div class="card-header bg-transparent border-0 py-md-5">
<img src="/img/logo/aliansce_full.svg" alt="Aliansce Shopping Centers" class="CLI img-fluid mx-auto d-block" autocomplete="on" autofocus require>
</div>
<div class="card-body px-md-5">
<form autocomplete="on">
<div class="form-group EGLF mt-4 mt-md-0">
<input type="text" id="FLUI" class="form-control FI EFLI border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" autocomplete="on" autofocus required>
<!-- FLOAT LABEL EFFECT -->
<label fo="FLUI" id="FLUL" class="EFL">Usuário</label>
<span class="EFHL"></span>
<span class="EFBL"></span>
<!-- FRONTEND RESPONSE ERROR MESSAGE -->
<div id="FBMEU" class="FBMEU ml-1 text-danger"></div>
</div>
<div class="form-group EGLF mt-4">
<input type="password" id="FLUPI" class="form-control FI EFLI border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" min="1" maxlength="10" required>
<!-- FLOAT LABEL EFFECT -->
<label for="FLUPI" id="FLUPL" class="EFL">Senha</label>
<span class="EFHL"></span>
<span class="EFBL"></span>
<!-- FRONTEND RESPONSE ERROR MESSAGE -->
<div id="FBMEUP" class="ml-1 text-danger"></div>
</div>
<div class="form-group mt-5">
<button type="button" id="FBSL" class="btn btn-primary w-esm-100 mb-2 px-lg-5">LOGIN</button>
<button type="button" class="btn bg-light w-esm-100 px-lg-5">VOLTAR</button>
</div>
</form>
<!-- BACKEND RESPONSE ERROR MESSAGE -->
<div class="text-center text-danger">
Usuário ou senha incorretos.
<br> Caso esteja com dificuldades, clique em "Precisa de Ajuda?".
</div>
</div>
<div class="card-footer bg-white border-0">
<button type="button" class="btn btn-link mx-auto d-block">Precisa de Ajuda?</button>
</div>
</div>
</div>
</div>
</div>
</main>
https://i.sstatic.net/U2isO.png https://i.sstatic.net/kVv4x.png