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

[Dúvida] Duvida não consigo reutilizar minha lista para responsivel(1024 e 1728 px)

Galera se alguém puder me ajudar, tipo eu usei uma lista, com links de ancôra, e comecei o projeto via mobile-first, porém ao deixar responsivel no header, que esta essa lista, não consigo reaproveita-la ai tive que fazer outra igual, só q ai fere muito o clean-code, se alguém puder me da uma luz, vai salvar muito; segue meu repositório : https://github.com/Moliveira7/FirstPage.git

7 respostas

Não entendi a sua dúvida. O seu problema está relacionado ao HTML, o CSS ou a responsividade?

O HTML não muda. O CSS muda com a responsividade quando vc coloca o codigo dentro do @media com o tamanho da tela que vc quer mudar.

Bom dia

Minha duvida é em como reaproveitar minha lista, a qual funciona para as telas menores que 1024px e acima, não consegui usar essa mesma lista, tive que fazer outra lista com os mesmos topicos para funcionar no caso aparecer em telas acima de 1024px

ah sim, dá uma olhada no seu @media. Se você colocou @media (max-width: 1024px) as alterações só funcionaram até no maximo (max-width) 1024px, se vc quer que as alterações englobem outros tamanhos de tela. Você pode colocar @media (min-width: 1050px) por exemplo. O min-width diz que as alterações podem funcionar a partir de um de mínimo.

Não é essa duvida, no meu codigo, tive que criar 2 listas iguais pra conseguir usa-las em funções diferentes, uma só para telas menores que 1024px, e a outra lista para telas acima de 1024px, sendo que isso não é muito clean code, sei que tem uma opção e não estou vendo kk

solução!

boa noite . estou começando ainda mas .......ja tentou colocar um id pra sua lista? , voce coloca um css pro tamanho grande e no @media voce coloca o css que quer pra tela menor.

  • no css :
    #lista_x{
    max width : 200px;
    width:100%}
    }
    @media (max-width: x x x){
    #lista_x{
    max width:120px;
    width:100%;
    }

Eu acabei de baixar o seu projeto para ver na minha máquina e adivinha? O tamanho da tela não está interferindo em nada. No seu body.css, em @media screen and (min-width: 1728px) está faltando um fechamento do "{ }" assim, o css não está sendo lido, apenas o @media screen and (min-width: 1024px).

Sem contar que o @media screen and (min-width: 1728px) é dispensável. Outro detalhe, evite usar caracteres especiais no html e css (e javascript). Isso pode trazer bugs a página já que o browser tem dificuldade em lê-los "ç", "â", "ã", acentos, etc. Como em "apresentação__texto" Use a regra dos nomes de variáveis para nomear os seus ids e classes também.

Ultimo detalhe, as classes costumam ser usadas para que o mesmo estilo seja empregado em varios lugares no site. No seu caso, em cada bloco de texto vc está usando uma classe diferente. Se atente nisso. Use um nome para os títulos e outro nome para os blocos de texto, assim além do código ficar mais claro, ele tbm fica limpo no CSS.

Valeu galera consegui arrumar aqui graças a vcs(marquei a solução do taian baroncelli, pq não da pra marcar mais do que uma, mais as dicas da Erica Santos Francisco, também ajudou bastante principalmente ali no clean code) , outra duvida é fiz o deploy no git hub porém não carregaou corretamente, por que o index.html( que seria o oMaleo.html) não está na raiz do projeto não consegui arrumar isso, se vcs puderem da uma luz, meu novo repositorio é : https://github.com/Moliveira7/new-page.git