image

Access unlimited bootcamps and 750+ courses forever

70
%OFF
Content list

LS

Leonardo Souza20/11/2022 20:31
Share

Erro com media query

  • #HTML
  • #CSS

Olá pessoal, tudo certo?

Alguém pode me ajudar em um erro no CSS?

Estou tentando deixar o clone do Orkut responsivo, porém, o Chrome não está lendo o arquivo onde deixei o media query.

Segue o link do repositório, caso alguém queira dar uma olhada: https://github.com/leocarv1/clone-orkut

Desde já, agradeço a quem puder me ajudar!!

Share
Recommended for you
Ri Happy - Front-end do Zero #2
Ri Happy - Front-end do Zero
AWS - Agentes de IA em Campo
Comments (1)
Willian Silva
Willian Silva - 20/11/2022 20:52

Boa noite Leonardo, sobre o CSS recomendo deixar as importações nesta ordem:

<link rel="stylesheet" href="./styles/reset.css"> // <- Limpa as formatações dos navegadores
<link rel="stylesheet" href="styles/global.css"> // <- carrega todos os seus estilos padrões

// Estes dois pode ser na ordem que aachar melhor a sua estrutura
<link rel="stylesheet" href="styles/Login/login.css"> // <- aplica os ajustes necessarios desta pagina
<link rel="stylesheet" href="styles/Login/login-responsive.css"> // <- carrega a parte de responsividade


Sobre seus arquivos verifiquei que você tem a classe container que deveria ser tratada mais isolada, e como está utilizando ela ela no seu arquivo "styles/Profile/profile.css", e no arquivo "styles/Profile/profile-responsive.css", recomendo a inversão da sequencia do import pós parece estar bloqueando a sua responsividade, aconselho sempre fazer a responsividade após toda a estilização base.


Deixando sua importação da seguinte forma , já resolve no arquivo "profile.html":

<link rel="stylesheet" href="styles/global.css">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/Profile/profile.css">
<link rel="stylesheet" href="styles/Profile/profile-responsive.css"> // Alterado para carregar a responsividade depois da estilização base