Entrar Ainda não tem acesso?
4
respostas

Meu

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Um novo footer

por Marco Neto
| 116.1k xp | 3 posts

Boa noite!!

Já revisei o código e não consigo encontrar a causa de o meu item Hipster ponto Tech estar mais para a direita do que os demais...

Podem me ajudar por favor?

Segue meu código:

<ul class="lista-rodape">
            <li class="lista-rodape__titulo">Comunidade</li>
            <li class="lista-rodape__item">
                <img src="imagens/HipstersTech.svg" alt="Logo da Hipster ponto Tech">
                <a href="#" class="lista-rodape__link">Hipster ponto Tech</a>
            </li>
            <li class="lista-rodape__item">
                <img src="imagens/ScubaDev.svg" alt="Logo da Scuba Dev">
                <a href="#" class="lista-rodape__link">Scuba Dev</a>
            </li>
            <li class="lista-rodape__item">
                <img src="imagens/LayersTech.svg" alt="Logo da Layers ponto Tech">
                <a href="#" class="lista-rodape__link">Layers ponto Tech</a>
            </li>
            <li class="lista-rodape__item">
                <img src="imagens/LikeABoss.svg" alt="Logo da Like a Boss">
                <a href="#" class="lista-rodape__link">Like a Boss</a>
            </li>
            <li class="lista-rodape__item">
                <img src="imagens/CarreiraSemFronteira.svg" alt="Logo da Carreira sem Fronteira">
                <a href="#" class="lista-rodape__link">Carreira sem Fronteira</a>
            </li>
            <li class="lista-rodape__item">
                <img src="imagens/HipstersJobs.svg" alt="Logo da Hipster ponto Jobs">
                <a href="#" class="lista-rodape__link">Hipster ponto Jobs</a>
            </li>
            <li class="lista-rodape__item">
                <img src="imagens/GUJ.svg" alt="Logo da GUJ">
                <a href="#" class="lista-rodape__link">GUJ</a>
            </li>
        </ul>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas
por Marco Neto
| 116.1k xp | 3 posts

Observação:

Para contornar essa situação, eu adicionei uma ancora:

<li class="lista-rodape__titulo">**<a class="lista-rodapetitulo">**Comunidade**</a>**</li>

Ai resolveu:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Mas eu ainda sim gostaria de entender a causa do problema, porque no codigo da instrutora, está identico ao meu (exceto que no código dela existem acentos e no meu não).

por Victor Costa Santos
| 2069.5k xp | 4035 posts
Alura Scuba Team Monitor do suporte educacional

Olá, Marco!

Analisando o seu código HTML não há nenhum erro, reparando a acentuação das suas classes que destoa do projeto da professora obtive o resultado esperado, sendo assim, pode haver alguma discrepância no seu CSS e principalmente na sua classe lista-rodape__titulo, que pode estar adicionando um espaçamento.

No mais, reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Marco Neto
| 116.1k xp | 3 posts

Olá boa tarde!

Após revisar o código encontrei o problema na linha 264...

<li class="lista-rodape__item">
                <img src="imagens/PM3.svg" alt="Logo da PM3">
                <a href="#" class="lista-rodape__link">PM3</a>
            </li>

Faltava o fechamento da tag nessa linha...

Agora está resolvido, obrigado!

por Victor Costa Santos
| 2069.5k xp | 4035 posts
Alura Scuba Team Monitor do suporte educacional

Olá Marco!

Fico feliz que deu certo e que você encontrou a solução. Se precisar, conte conosco. Abraços!