Para melhorar a sua experiência, escute esse artigo. |
Como corrigir a responsividade e problemas do site na versão mobile:
Cada situação que nós trazemos para vocês é a prática que acontece com os nossos projetos no dia a dia pela WebsiteGO. Não existe essa fantasia de criar tudo e subir no servidor de forma perfeita. Mas sim, a experiência de cada problema onde vamos aprendendo da melhor maneira possível. Um dos grandes problemas que eu identifiquei em nossos alunos e parceiros foi como corrigir a responsividade e problemas do site na versão mobile.
Portanto aqui trouxemos a solução que mudará a sua vida e os seus resultados. Por mais que você use sempre o mesmo template para todos os sites sempre existirá um erro diferente onde você vai aprender a trabalhar e corrigi-lo da melhor maneira possível.
O menu do site reliancia.ch quebrou por conta das bandeiras de traduções e por isso usamos o Media Queries para corrigir o problema. Média Queries um módulo CSS3 que permite que a renderização de conteúdo se adapte a condições como resolução de tela. Tornou-se um padrão recomendado pelo W3C em junho de 2012 e é uma tecnologia fundamental do design responsivo da web.
Exemplo:
Não existe script para esse tutorial, existe mesmo um objetivo sobre uma classe @media que ajusta o seu site em qualquer formato de tela como no exemplo abaixo.
@media (max-width: 728px){
.classe{
width: 130px;
}
}Conclusão:
O que eu disse acima foi que quando a tela do meu dispositivo for de 0 à 728px minha classe vai atingir um tamanho (width) de 130px. Com isso nós conseguimos manusear qualquer item em versões de tela menores ou maiores.
Dicas e novidades no Canal do Telegram e no nosso instagram.
Abraço! 🙂