5

Estou tentando fazer uma coisa que deve ser simples, mas meus conhecimentos em CSS são pífios. Gostaria de fazer uma tela de login com uma coluna fixa na direita, como na imagem abaixo, porém gostaria que a coluna da direita preenchesse toda a largura quando a tela for estreita, por exemplo, em aparelhos celulares.

inserir a descrição da imagem aqui

Obrigado!

5
  • 1
    Olá, bem vindo ao stackOverflow pt! Tente postar juntamente com a sua pergunta algum código que já tenha provado. Mas acho que o que você está procurando se chama responsividade. Commented 6/11/2018 às 9:48
  • Sugiro você utilizar Bootstrap, com ele você consegue fazer isso tanto pra desktop quanto pra mobile.
    – Renan
    Commented 6/11/2018 às 10:51
  • @RenanOsorio para que usar Bootstrap para isso? Para que vc vai importar um Framework de 90kb se pode resolver isso com menos de 10 linhas de CSS?
    – hugocsl
    Commented 6/11/2018 às 10:58
  • O Bootstrap vai ajudar não só pra fazer essa tela de login, e sim pra futuras estruturas que ele pode precisar tanto pra mobile quanto pra desktop, nesses casos tu tem um framework pronto, não precisa fica refazendo algo que já está pronto.
    – Renan
    Commented 6/11/2018 às 11:03
  • Olá, bem vindo ao stackOverflow! :D Só uma dica para suas proximas perguntas, evite usar links para, exemplos ou codigo, pois pode ocorrer do link ficar inativo. Assim você deixa de ajudar ao próximo. ;) Commented 7/11/2018 às 17:51

2 Respostas 2

7

Exitem várias formas de fazer. Aqui tem um exemplo simples com Flexbox.

Esse modelo funciona assim, usando o media query @media quando a tela for maior que 660px com o flex-basis eu determino que a coluna da direita vai ter 70% e a da direita 30%, Quando a tela for menor que 660px cada coluna fica com 100% de flex-basis, dessa forma cada coluna ocupa uma linha inteira.

inserir a descrição da imagem aqui

Código com o resultado da imagem acima:

OBS: Exiba em "Página toda" para ver melhor como fica responsivo. Caso quei ajustar a largura das colunas basta ajustar proporcionalmente os 70% e 30% sempre somando no máximo 100%, Ex: 75%, 25%

* {
    box-sizing: border-box;
}
.container {
    display: flex;
    flex-wrap: wrap;
}
.esq {
    flex-basis: 70%;
    background-image: radial-gradient(transparent, rgba(0,0,0,0.9)), url(https://unsplash.it/360/200);
    background-size: cover;
}
.dir {
    flex-basis: 30%;
    background-color: aliceblue;
}
@media screen and (max-width: 660px) {
    .container > div {
        flex-basis: 100%;
    }
}
<div class="container">
    <div class="esq">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sed?
    </div>
    <div class="dir">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sed?
    </div>
</div>


DICA: a título de curiosidade mesmo

Nesse caso em especifico vc tb pode usar a técnica conhecida como Flex-grow 9999 Hack com ela vc consegue fazer as colunas quebrarem sem precisar de media query! Aqui vc pode ler mais sobre isso: https://joren.co/flex-grow-9999-hack/

inserir a descrição da imagem aqui

Veja o código usado para ter o resultado da imagem acima:

.container {
  display: flex;
  flex-wrap: wrap;
}
.cell {
  display: flex;
  align-items: center;
  height: 100px;
}
.first {
  flex-grow: 1;
  background-color: lightgreen;
  flex-basis: 70%;
  min-width: 320px; 
}
.second {
  flex-grow: 9999;
  flex-basis: 30%;
  background-color: lightblue;
}
<div class="container">
  <div class="cell first">
    Cell 1
  </div>
  <div class="cell second">
    Cell 2
  </div>
</div>

3
  • Só pra complementar, se você deseja esconder a imagem da esquerda no mobile (para que n fique na parte superior da tela), basta adicionar um jquery/css que esconde a div em telas pequenas
    – Renan
    Commented 6/11/2018 às 10:54
  • 1
    @RenanOsorio na verdade é só colocar dentro do media querie display:none na div da esquerda, pra que usar jQuery ou JS? Já está prontinho ali, basta adicionar 1 linha de css.....
    – hugocsl
    Commented 6/11/2018 às 10:57
  • Ah é verdade, bem observado.
    – Renan
    Commented 6/11/2018 às 10:58
2

Olá, esse tipo de tela é chamado de Feature Screen e normalmente não se têm um conteúdo que ultrapassa a dimensão da própria tela. Para fazer uma tela como essa você pode usar a estrutura abaixo:

   * {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}

.wrapper>* {
  flex: 1
}

.feature {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* background-image: url('minha-imagem-aqui.jpg') */
  background-color: red; /* troque essa linha pela de cima */
}

.main {
  width: 100%;
  max-width: 350px;
  min-width: 350px;
}

@media only screen and (max-width: 576px) {
    .feature {
        display: none;
    }
}
<div class="wrapper">
  <div class="feature"></div>
  <div class="main">
    <p>o conteúdo da página aqui</p>
  </div>
</div>

Assim como o comentário acima, você deveria dar uma olhada em responsividade porque esse tipo de controle é feito com media queries. Dê uma olhada nesse artigo:

EDIT

Fiz alterações na solução apresentada acima para que se adeque a largura da tela quando estiver em um tamanho específico. Tomando como base o bootstrap, que define que uma tela é do tamanho de um aplicativo quando está com no máximo em 576px

4
  • 1
    Olá @Leandrouk, obrigado pela resposta. De todas as respostas aqui, o seu código é o que mais se aproxima do que eu quero fazer. Mas está faltando a coluna assumir a tela toda quando a largura da tela ficar estreita como num celular. Até aqui eu já tinha conseguido fazer algo parecido. Pode, por favor, dar uma atenção a esse último detalhe? Obrigado!
    – itamarluiz
    Commented 6/11/2018 às 23:31
  • Chegando em casa eu coloco pra você ok? Tô na faculdade Commented 6/11/2018 às 23:37
  • 1
    Obrigado @LeandroLuk.
    – itamarluiz
    Commented 8/11/2018 às 20:26
  • Olá, poderia marcar a resposta que for a correta para encerrar a pergunta? Commented 28/11/2018 às 18:08

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 .