CSS responsivo - agrupar boxes

[FabianoSouza 5]

Pessoal, estou refazendo meu site com base num "modelo" que encontrei por aí.

Estou enfrentando dificuldade para montar o layout dentro da tag header .

 

Coloquei duas imagens para ilustrar o resultado que preciso atingir em desktop (os 4 itens exibidos em 2 pares)

 

 

e em mobile (os 4 itens exibidos em coluna).

 

 

Provisoriamente estou colocando o site nesse link,  link para testes onde é possível ver tudo (HTML, CSS, JS e etc).

O arquivo que tem as regras CSS da página é o css.css.

 

Peço ajuda ao colegas para conseguir ajustar essa parte central do layout :-) 

 

(não se apeguem às cores fortes do que estou usando dentro da HEADER ...são apenas para testes)

[Public2004 79]

@FabianoSouza Boas jovem. Basicamente o conceito do layout responsivo é trabalhar com medidas relativas ( % ) e não fixas.
No seu projeto, a ideia é criar um container para abrigar os itens (no caso os boxes) com medida relativa e podendo ou não limitar sua largura, algo como: .container {width: 100%;  max-width: 1200px;}

Para a estrutura geral, algumas alternativas possíveis são: css layout flexbox, grid, float e até position, tudo vai depender de como queira e seja melhor ao seu projeto (eu particularmente daria preferência ao grid).

 

Apenas para ilustrar a grosso modo utilizando como exemplo "flexbox" ou "float", se você precisa que em resolução "X" mostre 2 box por linha, defina-os com 50% cada box e quando a resolução for menor que "Y", defina com 100% cada box.

 

Espero que ajude e qualquer coisa, estamos aí.

Abs.

[FabianoSouza 5]

@Public2004 cara, muito obrigado pelas orientações.

Eu não vivo de programação. Apenas quero criar meu site dentro dos padrões modernos.

 

Não sei trabalhar com as "técnicas modernas" de layout. Apenas aplicar o CSS "solto", estilizando sem "metodologia" (mas respeitando hierarquia de elementos).

 

Pesquisando vi o quanto complexo ficou o desenvolvimento front end...há várias "metodologias", uma infinidade de unidades de medidas.. bom vou tentar me aprofundar em grid layout porque parece ser mais flexível e performático (embora pareça ser mais complexo do que flex box).

 

 

Super obrigado! 

[MiqueiasBarros 0]

Um grande aliado para ajudar e que eu me apaixonei em usar foi o bootstrap, usando ele como base ele vai redimencionar bem o conteúdo do seu site. 

[Guilherme Luiz 41]

Veja o Bootstrap

com ele você utiliza grids de uma forma muito simples.

 

Mas ainda mais pra facilidar, veja o site Webflow

É uma plataforma gratuita que da para criar webs responsivas com drag & drop bem bacana

[FabianoSouza 5]

Obrigado @MiqueiasBarros e @Guilherme Luiz

[tudodomundo 0]

Jogador, você pode usar media queries para isso, acho que seria melhor (além das medidas relativas, certamente). Basicamente você vai fazer essa parte ai para desktop normalmente, depois de feito você pega e adiciona esse CSS:

@media (max-width:800px) {
	/* CODIGO AQUI*/
}

Pronto, ai dentro desse código ai você coloca como deve ficar em mobile, no caso a div destaque você reescreve o css dela ai dentro da forma que quer nos mobile...

Basicamente é isso cara, mas tem outras formas de fazer, claro ...