How to not leave so much unused space on the screen (Scroll bar so large)

Question

How to not leave so much unused space on the screen (Scroll bar so large)

Asked 3 years, 2 months ago

Viewed 24 times

0

I’m having a hard time getting the background right, because there’s a big part left and I didn’t want it to have the scrollbar so big at the bottom. If I change the width and height of . cadastrobox, I only change the black background and not the image of the hall. Before, there was a blank part of the background. Then I put the (background-Attachment: Fixed;) and that solved that part of my problem, but now there is a large unnecessary part of the fund giving continuity. And I wish that where there was the blank part, that’s where the final limit of the image should be. And I don’t quite know how to change that, because I’m a beginner on this subject. [! [Before background-Attachment: Fixed][1]][1] [! [After background-Attachment: Fixed][2]][2]

    border: 0;
   
}

body {
    margin: 0;
    padding: 0;
    background-image: url(../imagens/salao.jpg);
    background-attachment: fixed;
    font-family: sans-serif;
    background-size: cover;
    justify-content: center;
    background-repeat: no-repeat;
}


h1 {
    margin: 0;
    padding: 0, 0, 20px;
    text-align: center;
    font-size: 22px;
}

h2, h4 {
    text-align: center;
}


.cadastrobox {
    width: 870px;
    height: 780px;
    background: rgba(0, 0, 0, .8);
    box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
    color: white;
    top: 60%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 40px 30px;
}

.cadastrobox i {
    width: 26px;
}

.cadastrobox p {
    margin: 0;
    padding: 0;
    font-weight: bold;
    display: inline-block;
}

.cadastrobox input {
    width: 100%;
    margin-bottom: 20px;
    display: block;
}


.cadastrobox input[type="email"],
input[type="password"], input[type="date"], input[type="text"] {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
    width: 40%;
}

.cadastrobox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #d84b6b;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
    width: 25%;
    margin-left: 37.5%;
}

.cadastrobox input[type="submit"]:hover {
    cursor: pointer;
    background-color: #c54e6a;
    color: #fff;
}

.cadastrobox a {
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}

.cadastrobox a:hover, input:hover, i:hover, p:hover{
    color: #d84b6b;
    border-bottom-color: #d84b6b;
}

.links {
    text-align: center;
}

.flex{
    display: flex;
    gap: 30px;
}

.flex .input-wrapper{
    width: 50%;
}

.flex .input-wrapper .input-img{
    position: relative;
}

.flex .input-wrapper input{
    width: 90%;
    text-indent: 30px;
}

.flex .input-wrapper .input-img i{
    position: absolute;
    top: 11px;
    left: 0;
}
.input-cadastre {
    margin-left: 18%;
    width: 80rem;
}
.input-cadastre .input-imgs{
    position: relative;
}

.input-cadastre input{
    text-indent: 30px;
}

.input-cadastre .input-imgs i{
    position: absolute;
    top: 11px;
    left: 0;
}

.cadastrobox  #politic{
    margin-left: 25% ;
}


/* Responsivo utilizado para tamanho de ipad */
@media only screen and (max-width: 800px){
    .form {
        width: 100%;
    }
}


/* Responsivo utilizado para tamanho de celular */
@media only screen and ( max-width: 480px) {
    .container .name h1 {
        font-size: 30px
    }

    .container .name h5 {
        font-size: 15px
    }

    /* é melhor colocar em porcentagem, para que o texto tenha respiro na tela */
    #about p{
        max-width: 80%;  
        text-align: justify;
    }
    
}```



```        <!DOCTYPE html>
        <html lang="pt-br">

        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="Imagens/R.png" rel="icon" />
            <link rel="stylesheet" href="css/cadastro.css">
            <title>Royal Hair</title>
        </head>

        <body>
            <div class="cadastrobox">
                <h1>Quero Criar uma Conta</h1>
                <h4>Precisamos coletar algumas informações para seu tratamento de realeza, vamos lá?</h4>
                <br>

                
                <form>
                    <div class="input-cadastre">
                        <p>Email </p>
                     <div class="input-imgs">
                        <input type="email" name="Email" placeholder= "Email">
                        <i class="fas fa-envelope"></i>
                     </div>
                    </div>
                   
                    
                    <div class="input-cadastre">
                        <p>Senha </p>
                        <div class="input-imgs">
                            <input type="password" name="senha" placeholder="*********"> 
                            <i class="fas fa-lock" aria-hidden="true"></i>
                    </div>
                    </div><br>
                    

                    <h2>Dados Pessoais</h2>
                    <br>
            <fieldset class="flex">
                <div class="input-wrapper">
                    <p>Nome </p>
                <div class="input-img">
                    <input type="text" name="Nome" placeholder="Nome">
                    <i class="fas fa-user"></i>
                </div>
            </div> 

                    <div class="input-wrapper">
                        <p>Sobrenome </p>
                        <div class="input-img">
                            <input type="text" name="Senha" placeholder="Sobrenome">
                            <i class="fas fa-user"></i>
                        </div>   
                    </div>
                  
            </fieldset>
            <fieldset class="flex">
                <div class="input-wrapper">
                    <p>CPF</p>
                    <div class="input-img">
                        <input type="text" name="CPF" placeholder="CPF">
                        <i class="far fa-address-card"></i>
                    </div>
                </div>
    
                    <div class="input-wrapper">
                        <p>Data de nascimento</p>
                        <div class="input-img">
                            <input type="text" name="Data" placeholder="dd/mm/aaaa">
                            <i class="far fa-calendar-alt"></i>
                        </div>   
                    </div>

            </fieldset>
            
            <fieldset class="flex">
                <div class="input-wrapper">
                    <p>Telefone </p>
                    <div class="input-img">
                        <input type="text" name="Telefone" placeholder="Telefone">
                        <i class="fas fa-phone-square-alt"></i>
                    </div>
                    
                </div>

                    <div class="input-wrapper">
                        <p>CEP </p>
                        <div class="input-img">
                            <input type="text" name="CEP" placeholder="CEP">
                            <i class="fas fa-map-marked"></i>
                        </div>
                    </div>
            </fieldset>

                <div>
                    <input class="form-check-input" type="checkbox" id="gridCheck">
                    <label for="gridCheck" id="politic">
                        Li e aceito a <a href="Politica.html">Politica de Privacidade</a> da empresa Royal Hair
                    </label>
                </div><br>
                <br>

                    <input type="submit" name="Enviar" value="Cadastrar">
                    <br>
                    
                </form>
            </div>
            <script src="https://kit.fontawesome.com/d010f99425.js" crossorigin="anonymous"></script>
        </body>

        </html>```


  [1]: https://i.stack.imgur.com/6QM8C.jpg
  [2]: https://i.stack.imgur.com/I1WHZ.jpg

1 answer

Browser other questions tagged css background

You are not signed in. Login or sign up in order to post.

by Sérgio Louro • 71 points · Answer 1 · 2021-09-02T22:55:18+00:00

What is harming developing the screen as you would like is the attribute width: 80rem in class .input-cadastre.

I did some tests here applying the attribute max-width: 100% in the class and the layout adjusted as you would like. At the end the class looked like this:

.input-cadastre {
    margin-left: 18%;
    width: 80rem;
    max-width: 100%;
}