Bound logo and title when resizing the window

Question

Bound logo and title when resizing the window

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

How to solve the print problem? I'm developing a responsive registration page, but the logo and the title are giving me a lot of headache, I've tried everything I know and I could not solve it, it's getting like that from a 500px. The problem is with this pixel transition.

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;

        }

html html5 css css3

asked by anonymous 02.07.2017 / 23:48

2 answers

Concatenate an SQL value Query image in a folder

score 1 · Answer 1

Try to use bootstrap to position .. would look like this:

   <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 to medium and col-xs-6 monitors for smaller devices.

If you have not yet solved your problem, use @media in your css:

      @media(min-width:500px) {


        #header-logo{

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

        }

}

Then just adjust according to the size of the screen, just add another line and change the minimum pixel.

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

score 0 · Answer 2

0

Place the header elements with position relative that everything will be resolved. Another way is to position the way you are doing with a larger top for the title and smaller for the logo;)

03.07.2017 / 03:34