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

Consolidando conhecimento em @media screen.

Adicionei, dentro de "head" no "index.html, a tag "meta" e "viewport". Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Aterei o tamanho do vídeo, mudando seu comportamento dentro de " iframe ", usando 'width="100%" para completar toda a largura da página e ' heigth=315 '. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Dentro do arquivo " style.css", adicionei um estilo diferente para dispositivos com largura de até 480 pixels.

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

Na sequência , como pediu o professor, fiz as mudanças nos códigos em "produtos.html" e "contato.html". Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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

Também no "style.css" em 'produtos' e 'contato'.

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

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

Assim ficaram as páginas Barbearia Alura, Produtos e Contato.

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

...

2 respostas

Olá, Daniel.

Tudo bem?

Aí sim, ficou bem legal a responsividade, parabéns ficamos muito felizes em ver que você está aprendendo e evoluindo.

Não tenho certeza mas acho que se você colocar um margin: 0 auto; na tag <main> o formulário ali da página de contato fica centralizado e descola do lado esquerdo.

Teste ai se não centralizar você adiciona depois da margin um width: 90%; ou 80%.

Valeu Daniel.

Qualquer dúvida conta com a gente :)

solução!

Sim, Renan, o professor já entregou essa diretriz após a instrução básica. Porém , eu enviei o básico do exercício, onde todos os 3 usavam "width: 100%". Assim, em experiência, apliquei no " width: 80%; ". Eu agradeço a dica, e pode deixar, na dúvida vou perguntar . Muito obrigado.

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