Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Por que usar várias folhas de estilo?

Estou fazendo o projeto no sublime e no codepen. Durante as aulas percebi que o professor usava várias folhas de estilo e fiz o mesmo no sublime, como no codepen só posso usar um arquivo css, fiz tudo nele. Até aí tudo bem, consegui dois projetos incrivelmentes parecidos. As coisas começam a ficar estranhas quando estou adaptando o site para mobile e coloco o @media no arquivo style.css. No codepen, como não há vários arquivos, quando eu redefino onde começa e termina meu destaque principal, ele funciona. Já no sublime, quando eu escrevo no style.css, ele não modifica o destaque. Para que isso aconteça é preciso realmente criar um novo arquivo e colar o @media lá. Por que isso acontece? Como saber se meu layout está dando errado porque eu não criei um estilo separado de css?

4 respostas

Oi, Gabriela, tudo bem?

Eu preciso ver teu código para entender como ele tá agindo. Além de estar no codepen, ele também está no github? Se puder compartilhar, porque assim fica mais fácil de visualizar e entender essa diferença que você está citando acima.

Olá Laís, não está no github, mas posso compartilhar o link do Google Drive: https://drive.google.com/drive/folders/1KyTLyy6i-g1Qpn_OaqacrLfS3OrXwCcT?usp=sharing

solução!

Oi, Gabriela, tudo bem?

A questão de usar várias folhas de estilo é que você consegue organizar melhor os estilos CSS. Como no curso, o instrutor faz o estilo do site com esse método, de separar em arquivos para a manutenção fique mais simples de ser feita.

Então, a cada modificação que você deseje fazer na versão responsiva, o ideal é ir no arquivo responsivo.css, onde estão os arquivos da parte responsiva do site, é modificar lá. E para que seja modificado, você precisa definir esse medias, pois tudo o que está fora desses medias entra na versão desktop, normal e não responsiva.

Dentro da lógica da forma como estão organizados os estilos do projeto, é seguir o padrão, quando precisar adicionar estilos aos formato responsivo, modifique no arquivo responsivo.css. E testei o sue projeto, e o formato mobile está certinho:

imagem de teste

Da forma como você definiu em responsivo.css

Muito obrigada Laís