Entrar Ainda não tem acesso?
4
respostas

Reduzir o conteúdo de uma barra inicial a medida que reduz o tamanho do navegador

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk

por Flávio Rafael do N Montenegro V
| 61.4k xp | 20 posts

Estou tentando aplicar os conceitos aprendidos nos cursos aqui do alura criando uma página home padrão, que possui uma barra inicial em cima da tela, na parte esquerda possui o Logo da marca, no meio um form para login e na parte direita os ícones das redes sociais(utilizando o image replacement). Porém, queria fazer com que, ao diminuir o tamanho do navegador, que o conteúdo da barra fosse reduzindo para caber nesse novo tamanho, até determinado ponto em que eu utilizaria o media queries e mudaria a forma como é exibido minha página. Tentei algumas formas e não está dando certo, queria ver se conseguia alguma luz ao perguntar aqui no fórum.

Esta barra está assim no HTML:

  <section class="barrainicial">    
            <nav>

                <div class="logo_home">
                    <a href="home.html"><img src="images/logo.png" alt="logo propick"></a> <!--diminuir os tamanhos-->
                </div>
            </nav>

            <section class="autenticacao">
                <form class="login">
                    <input id="id_usuario" name="usuario" type="text" class="" placeholder="Usuario *" required>
                    <input id="id_senha" name="senha" type="password" class="senha" placeholder="Senha *" required>
                    <button class="botaologin" type="submit">Login</button>
                </form>
                <button class="botaoregistrar" type="submit">Registrar</button>
            </section>

            <aside>

                <ul class="icones_sociais">
                    <li><a class="facebook" href="http://facebook.com">Facebook</a></li>
                    <li><a class="twitter" href="http://twitter.com">Twitter</a></li>
                    <li><a class="instagram" href="http://instagram.com">Instagram</a></li>
                    <li><a class="youtube" href="http://youtube.com">Youtube</a></li>
                </ul>


            </aside>
        </section>

E no Css está:

.barrainicial{ 
    height: 5.625em; 
    background-color: #000000;
    max-width: 100%;  
    display: flex;
    flex-direction: row;
    align-items: center;    
}

.login {
    display: inline-block;   
}

.icones_sociais li{
    display: inline-block;
    padding: .5em; 
}

.logo_home{
    padding: .625em; 
    position: absolute;
    top: 0%;
}

.autenticacao{
    padding: 18.75em 12.5em 18.75em 25em; 
}

.icones_sociais a{
    width: 40px; 
    height: 40px;
    display: inline-block;
    text-indent: -9999px;    
}

.twitter{
     background-image: url(images/twitter.png);
    background-repeat: no-repeat;
    background-size: 100%
}

.youtube{
    background-image: url(images/youtube.png);
}

.instagram{
    background-image: url(images/instagram.png);      
}

.facebook{
    background-image: url(images/facebook.png);    
}

Alguém poderia me dar alguma dica do que posso fazer para conseguir deixar o conteúdo reduzindo a medida que o tamanho reduz? obrigado!

4 respostas
por Allan Pinheiro de Lima
| 449k xp | 265 posts
Chief of Technology Officer

Bom, essa aqui é uma opinião minha. Uma questão de preferência e funcionalidade.

Eu usaria seu código um pouco diferente. Para os containers dos inputs e login, eu usaria o tamanho em porcentagem (%) e usaria tamanho de .em apenas para as fontes.

Devo lembrar que os tamanhos em EM são determinados por um valor inicial que você der a ele. Então se você tiver no seu arquivo que 1em vale 16px. então 2em valem 32px, sacou?

Olha como eu faria o CSS abaixo

body,
form{
    margin: 0px
}

.barrainicial{ 
    height: 5.625em; 
    background-color: #000000;
    max-width: 100%; 
    width: 100%; 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;    
}

.barrainicial > nav,
.barrainicial > aside,
.barrainicial > section{
    width: 33%;
}

.login {
    display: inline-block;   
}

.icones_sociais li{
    display: inline-block;
    padding: .5em;
}
.logo_home_wrapper{
    height: 100%;

}
.logo_home{
    height: 100%;
    top: 0%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
}

.icones_sociais a{
    width: 40px; 
    height: 40px;
    text-indent: -9999px;  
    color: white;  
}

.twitter{
    background-image: url(images/twitter.png);
    background-repeat: no-repeat;
    background-size: 100%
}

.autenticacao{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
}

.youtube{
    background-image: url(images/youtube.png);
}

.instagram{
    background-image: url(images/instagram.png);      
}

.facebook{
    background-image: url(images/facebook.png);    
}

Repare que eu desamarrei os paddings por enquanto, já que o flexbox faz toda essa parte de manipulação dos elementos dentro de uma tag. Eu também retirei o posicionamento absoluto da nav para controlar a posição dela e visto que são 3 seções, eu deixei elas com 33% cada uma ( você pode manipular estes tamanhos mais tarde no CSS

Se isso não for mais ou menos o que procura, nos dê um aviso que tentamos ajudar

por Flávio Rafael do N Montenegro V
| 61.4k xp | 20 posts

Tentei fazer as alterações porém ficou um pouco diferente.

https://docs.google.com/drawings/d/1nONOa3xOsmvCgKqxf89m7EFcH_5Nt8VprnFFwr1PYCA/edit?usp=sharing

Na imagem acima está com as alterações(mudei um pouco no logo da home pois o objetivo é ficar desse jeito, sem estar todo na barra e mantive o inline-block nos ícones sociais pois quando eu tirei ficou meio bugado aparecendo os nomes e o background ficou cortado).

No caso, nessa imagem abaixo é como seria a ideia dessa barra, e logo após ela como fica caso eu reduza um pouco o tamanho da janela, o que eu queria era justamente manter a configuração inicial apenas diminuindo o tamanho e as distâncias dos elementos.

https://docs.google.com/drawings/d/18UJB0Ba3Vc1awW88VVdlL95PCLarCdvuwCIRhD2cnOI/edit?usp=sharing

Obrigado pela atenção!

por Flávio Rafael do N Montenegro V
| 61.4k xp | 20 posts

Mais alguem pra me dar uma luz?

por Vitor Rezende
| 119.5k xp | 5 posts
Web Developer

Acho que o min-width pode te ajudar a não quebrar seu layout quando você reduzir o tamanho da janela. Tente remover os paddings laterais também.