1

tenho a seguinte estrutura

<div id="container-header">
  <div class="center">

    <div class="content-header">content-header</div>
    <div class="thumb-header">thumb-header</div>

  </div>
</div>


div {width: 100%;}

.center {
   width: 71.42857142857143%;/*1200/1680*/
   margin: 0 auto;
}

.center > div {
   height: 120px;
   background-color: #ccc;
}

.content-header {width: 83.33333333333333%;/*1000/1200*/}

.thumb-header {width: 14.33333333333333%;/*172/1200*/}

resultado

inserir a descrição da imagem aqui

agora quando diminuo a tela a div thumb-header perde seu tamanho normal, nesse caso teria que fazer uma media queries pra cada situação ou tem outro jeito?

inserir a descrição da imagem aqui

2
  • O que vc quer dizer com " tamanho normal", na verdade o tamanho dela está normal, ela corresponde ao tamanho que vc delimitou 14.3% da largura do pai... quanto menor o pai, visualmente menor vão ficando os filhos... Qual comportamento vc queria que eles tivessem?
    – hugocsl
    1/06/2019 às 16:05
  • @hugocsl opa hugo, tipo queria que a thumb-header acompanhasse a tela só que mantesse a aparencia de 14.3% entendeu? exemplo prntscr.com/nwc4tj
    – goio
    1/06/2019 às 16:35

1 Resposta 1

1

Se eu entendi bem vc quer que tenha 14.3% da largura, mas tb quer que respeite uma largura mínima, para isso vc vai ter que usar um min-width. Por exemplo se a tela for bem larga o tamanho fica em 14.3%, mas se for bem pequena ela vai ter um mínimo de 160px de largura por exemplo... E a div da direita vc deixa com flex:1 assim ela só vai ocupar o espaça restante

inserir a descrição da imagem aqui

Segue o código da imagem acima.

div {border: 1px solid #000;}

.center {
    width: 71.42857142857143%;/*1200/1680*/
    margin: 0 auto;
    display: flex;
}

.center > div {
    height: 120px;
    background-color: #ccc;
}

.content-header {
  flex: 1;
  /* espaço entre uma div e outra */
  margin-right: 16px; 
  }

.thumb-header {
  width: 14.33333333333333%;/*172/1200*/
  min-width: 160px;
 }
<div id="container-header">
  <div class="center">

    <div class="content-header">content-header</div>
    <div class="thumb-header">thumb-header ratione rem consequatur.</div>

  </div>
</div>

2
  • como sempre salvando minha vida
    – goio
    1/06/2019 às 17:17
  • @goio Sem problema meu caro []'s
    – hugocsl
    1/06/2019 às 17:20

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 .