CSS Versão desktop de site responsivo não está ficando correto

[Gustavocia]

Olá. 

 

Preciso de ajuda para fazer este site ficar responsivo. Já fiz a versão mobile, mas a versão desktop usando o @media (min-width: 900px) não está dando certo. 

 

Os seguintes problemas estão acontecendo: 

 

1) O .logodesktop não está ficando com o tamanho correto. A logo na versão mobile do header é pra ser uma e na versão desktop é outra.

 

2) O Footer não apareceu na versão desktop.

 

3) Na versão mobile são 4 cards, já na versão desktop são 6, para tanto eu criei mais duas div cards, mas isso desconfigurou o gap e as div cards da versão mobile. Tenho que usar display none na div na versão mobile? Como?

 

4) O header do desktop coloquei como 100vh para ficar a página toda, mas não sei se é o correto.

 

Aqui estão os códigos que estou fazendo.

 

Obrigado. 

[extremedll]

@Gustavocia poderia deixar o repositório público para facilitar a replicagem do ambiente?

[Gustavocia]

Em 11/07/2023 às 11:03, extremedll disse:

@Gustavocia poderia deixar o repositório público para facilitar a replicagem do ambiente?

Seria isso?

 

Não sei mexer muito bem no GitHub, tenho que pesquisar mais a respeito, vou pesquisar vídeo aula no Youtube. 

 

Já quanto ao site eu fiz algumas modificações. 

[extremedll]

@Gustavocia

 

acho que conseguir o precisa. na media para desktop troquei o display: flex por grid e tirei o valor que você tinha setado em rem por %

 

dica: evite ao máximo usar px,em,rem (medidas fixas em geral), quando for tratar de largura do documento ou objetos em layout responsivo. mas resumindo o contexto da ópera: usar medidas fixas ao invés de % te limita demais e te obriga a criar mediaquery para tratar cada resolução. isso é um grande problema, pois você tem X resoluções que podem ser utilizadas tanto na vertical quanto na horizontal. usar % fala muito a sua vida na hora de criar um layout resposivo. já que, por exemplo: width: 100% vai ocupar 100% da largura independente se é uma tela de 320px ou 4k de largura. entendes?

 

vou deixar listado alguns tópicos que podem te ajudar a entender a importância do uso de % ao invés de medidas fixas.

 

por que porcentagem (fórum da alura)

não consigo entender a diferença entre porcentagem e px no css (stackoverflow)

 

ah, usei grid pois na minha opinião, grid funciona melhor para layouts responsivos.

 

@media (min-width: 900px) {
  .page {
    display: grid;
    max-width: 100%;
    margin: 0;
  }
}

 

resultado: