-1

Pessoal como faço para tirar esse Scroll que aparece quando abro essa página em telas menores? Gostaria de deixá-la responsiva tbem e com o card de login no meio da página com margin top e bottom mais sem criar scroll(barra de rolagem), se alguém poder me ajudar agradeço.

inserir a descrição da imagem aqui

<style>
    body{
        margin:0;
        padding:0;
    }

    .body-custom {
        height: 100%;
    }

    .logincard {
        margin: auto;
        position: relative;
        max-width: 360px;                            
    }

    .loginlogo {
        text-align: center;
        padding: 30px 15px 10px;
        margin: 0;
    }

    .card-footer-p16 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pmd-textfield-focused {
        background-color: #001E80;
    }

</style>

<div class="container">
    <div class="logincard ">
        <div class="pmd-card pmd-z-depth">
            <div class="login-card">
                @using (Html.BeginForm("Login", "Acesso", FormMethod.Post))
                {
                    <div class="pmd-card-title text-center">
                        <h1 class="loginlogo">
                            <img src="/images/SSP.png" alt="Secretaria de Estado de Segurança Pública" class="img-responsive logo_login">
                        </h1>
                        <h3>
                            <strong>ANÁLISE CRIMINAL</strong>
                        </h3>
                    </div>

                    <div class="pmd-card-body">
                        @if (!string.IsNullOrWhiteSpace(ViewBag.errorMessage))
                        {
                            <div class="alert alert-warning" style="text-align:center;">@ViewBag.errorMessage</div>
                        }
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="Usuario" class="control-label pmd-input-group-label">Usuário</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="material-icons md-dark pmd-sm">perm_identity</i>
                                </div>
                                <input type="text" class="form-control" id="Usuario" name="Usuario"><span class="pmd-textfield-focused"></span>
                            </div>
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="Senha" class="control-label pmd-input-group-label">Senha</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="material-icons md-dark pmd-sm">lock_outline</i>
                                </div>
                                <input type="password" class="form-control" id="Senha" name="Senha"><span class="pmd-textfield-focused"></span>
                            </div>
                        </div>
                    </div>

                    <div class="pmd-card-footer pmd-card-footer-no-border card-footer-p16 text-center">
                        <button type="submit" class="btn pmd-ripple-effect btn-primary btn-block">Login</button>
                    </div>
                }
            </div>
        </div>                
    </div>

    <footer class="text-center footer">
        <hr />
        <p>
            &copy; @DateTime.Now.Year - Secretaria de Estado de Segurança Pública - SSP/SMT - Subsecretaria de Modernização Tecnológica.<br />
            Versão: @ViewBag.versao
        </p>
    </footer>
</div>
2
  • Coloca overrflow:hidden no body. Ou diminui o tamanho da imagem
    – hugocsl
    27/05/2020 às 14:25
  • Você pode também definir o tamanho datela de acordo com o viewport. 27/05/2020 às 14:30

1 Resposta 1

0

Adicione isso aos seus styles :

.container {
    max-height:100% !important;
    overflow:hidden;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .