Logo and title bugados when resizing the window

Question

Logo and title bugados when resizing the window

Asked 7 years ago

Viewed 72 times

0

How to solve the print problem? I’m developing a responsive registration page, only the logo and the title are giving me a lot of headache, I’ve tried everything I know and I couldn’t solve, it’s getting like this from about 500px. The problem lies in this transition of pixels.

HTML

<!DOCTYPE html>
        <html>
        <head>
            <title></title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="css/reset.css">
            <link rel="stylesheet" type="text/css" href="css/cadastro.css">
            <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        </head>
        <body>

            <div id="header">
                <div id="header-logo">
                    <h1>
                        <img id="logo" src="img/logo.png" alt="Logo da Realiza Digital">
                    </h1>
                    <h4>Social Network</h4>
                </div>

                <h1 id="titulo">Cadastro</h1>
            </div>

            <div id="content">

                    <form id="formulario">

                        <label for="nome" class="p48">
                            <span>Nome:</span>
                            <input type="text" name="nome" id="nome" placeholder="Digite aqui seu nome">
                        </label>

                        <label for="sbnome" class="p48">
                            <span>Sobrenome:</span>
                            <input type="text" name="sbnome" id="sbnome" placeholder="Digite aqui seu sobrenome">
                        </label>

                        <label for="email" class="p48">
                            <span>E-mail:</span>
                            <input type="email" name="email" id="email" placeholder="Digite aqui seu email">
                        </label>

                        <label for="idade" class="p23">
                            <span>Idade:</span>
                            <input type="number" name="idade" id="idade" placeholder="Digite aqui sua idade">
                        </label>

                        <label for="cpf" class="p23">
                            <span>CPF:</span>
                            <input type="number" name="cpf" id="cpf" placeholder="Digite aqui seu CPF">
                        </label>

                        <label for="cep" class="p23">
                            <span>CEP:</span>
                            <input type="number" name="cep" id="cep" placeholder="Digite aqui seu CEP">
                        </label>

                        <label for="endereco" class="p48">
                            <span>Endereço:</span>
                            <input type="text" name="endereco" id="endereco" placeholder="Digite aqui seu endereço">
                        </label>

                        <label for="senha" class="p23">
                            <span>Senha:</span>
                            <input type="password" name="senha" id="senha" placeholder="Digite aqui sua senha">
                        </label>

                        <input type="submit" name="enviar" id="enviar" value="ENVIAR">
                    </form>
                    </div>

            <div id="footer">
                <p>Projeto Realiza Digital © 2017</p>
            </div>

        </body>
        </html>

CSS

body {
        font-family: 'Open Sans', sans-serif;
        box-sizing: border-box;
    }

    #header {
        background-color: #e0e80d;
        height: 170px;
    }

    #header-logo h1 {
        position: absolute;
        top: 20px;
        left: 50px;
    }

    #header-logo h4 {
        position: absolute;
        top: 130px;
        left: 50px;
        text-transform: uppercase;
        color: rgb(0, 54, 52);
        font-weight: bold;
        font-size: 17px;
    }

    #header a {
        text-decoration: none;
        color: rgb(0, 54, 52);
    }

    #titulo {
        text-align: center;
        font-weight: bold;
        padding-top: 60px;
        font-size: 40px;
    }

    #content {
        max-width: 800px;
        margin: 0 auto;
        margin-top: 100px;
    }

    #formulario {
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        max-width: 800px;
        height: 290px;
    }

    label {
        margin-top: 30px;
    }

    label input {
        width: 93%;
        height: 30px;
        padding: 10px;
        border-style: none;
        border-radius: 4px;
        box-shadow: 0px 0.5px #888888;
        background-color: #eee;
        font-size: 15px;
    }

    input::placeholder {
        color: rgb(170, 170, 170);
    }

    span {
        display: block;
        margin-bottom: 10px;
        color: rgb(0, 54, 52);
        font-weight: bold;
    }

    .p48 {
        width: 49%;
        margin-right: 1%;
    }

    .p23 {
        width: 22%;
        margin-right: 3%;

    }

    #enviar {
        margin-top: 65px;
        padding: 15px;
        background-color: #b4bb07;
        border-style: none;
        border-radius: 4px;
        width: 31%;
        height: 60px;
        color: white;
        box-shadow: 1px 1px 1px #888888;
        font-size: 20px;
        cursor: pointer;
    }

    #footer {
        background-color: #e0e80d;
        margin-top: 300px;
        padding: 40px 0px;
        display: flex;
        justify-content: center;
        position: relative;
        bottom: 0;
        width: 100%;
    }

    #footer p {
        font-weight: bold;
    }


    @media screen and (max-width: 380px) {

        #header {
        display: flex;
        justify-content: center;
        height: 260px;
        }

            #header-logo h1 {
            left: 30%;
        }

        #header-logo h4 {
            position: absolute;
            top: 140px;
            left: 25%;
            text-transform: uppercase;
            color: rgb(0, 54, 52);
            font-weight: bold;
            font-size: 17px;
        }

        #titulo {
            font-weight: bold;
            padding-top: 180px;
            font-size: 40px;
        }

        #content {
            max-width: 280px;
            margin: 0px 4% 0px 4%;
            }

        label {
            display: flex;
            flex-wrap: wrap;
        }

        .p23 {
            width: 95%;
            margin-left: 5%;
            margin-right: 0%;
        }

        .p48 {
            width: 95%;
            margin-left: 5%;
            margin-right: 0%;
        }

        #enviar {
            width: 84%;
            margin: 0 auto;
            margin-top: 80px;

        }

        #footer {
            margin-top: 800px;
            padding: 40px 0px;

        }

You need the first image to be the same as the second image, that is, right above, title below and all centered?

– Luiz Augusto Neto

2017/07/13 at 14:20

2 answers

Browser other questions tagged html css html5 css3

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

by Luiz Gustavo • 41 points · Answer 1 · 2017-07-03T12:33:35+00:00

Try to use the bootstrap to position.. would look that way:

   <div id="header">
            <div id="header-logo col-md-12 col-xs-6">
                <h1>
                    <img id="logo" src="img/logo.png" alt="Logo da Realiza Digital">
                </h1>
                <h4>Social Network</h4>
            </div>

            <h1 id="titulo">Cadastro</h1>
        </div>

Adding col-Md-12 class for medium monitors and col-Xs-6 for smaller devices.

If you still don’t solve your problem, use @media on in your css:

      @media(min-width:500px) {


        #header-logo{

            margin-left: 50px; // Apenas um exemplo de 50px.. vc vai ter que ir ajustando ai..

        }

}

Ai just go adjusting according to the screen size, just add another line and change the minimum pixel.

I hope to have helped, any doubt can leave in the comments. Hug!

by Allan Ferreira • 1 point · Answer 2 · 2017-07-03T01:34:22+00:00

0

Place the header elements with relative position that everything will be solved. Another way is to position the way you’re doing with a bigger top for the title and smaller for the logo ;)

I put the relative position, but now I can’t position the #title in the center, because I can’t use a padding-bottom, just padding-top, look how it looks: http://prntscr.com/fqwhjc, how to fix it?

– Lucas Curi

2017/07/03 at 02:28