Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia,
Sou novo por aqui. Inicialmente gostaria de parabenizar pelo trabalho desse forum.
Estou criando um site que tem dois problemas básicos.
O primeiro é que o logotipo à esquerda precisa diminuir de tamanho quando o site for aberto em um celular, pois senão o logo fica em cima do banner.
E o segundo é que no desktop o banner não fica alinhado com a div de baixo.
Se mexo em um não fica bom no outro.
Estou tentando inserir regras para o css ficar responsivo mas parece que não obedece.
O site é o http://www.credifree.com.br/teste4/index.html
Alguém pode me dar uma luz?
Obrigado
Paulo
Puxa, mas é realmente necessário isso?
Não tem como usar as regras normais de CSS pra ajustar?
O que eu quero é a mudança de um parâmetro do CSS ao usar um celular e outro para usar no desktop.
O resto pode continuar como está.
o bootstrap tem muuuuito recurso, mas se você quer apenas isso, pode utilizar media query
https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries
Para outras páginas posso utilizar sim. Muito obrigado pela dica.
Estou testando com Media Queries, mas não está funcionando como deveria.
Estou usando tudo o que é resolução e no celular continua igual.
No desktop, se redimensiono o navegador, as mudanças funcionam.
O que acha que pode ser?
O que acontece é que o celular dá uma "enganada" no navegador, fingindo que a sua largura é diferente da largura real, precisaria colocar a meta viewport, algo +/- assim:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Mais sobre o assunto:
[https://tableless.com.br/manipulando-metatag-viewport/](https://tableless.com.br/manipulando-metatag-viewport/)
[https://developer.mozilla.org/pt-BR/docs/Mozilla/Mobile/Viewport_meta_tag](https://developer.mozilla.org/pt-BR/docs/Mozilla/Mobile/Viewport_meta_tag)
[https://www.w3schools.com/css/css_rwd_viewport.asp](https://www.w3schools.com/css/css_rwd_viewport.asp)Já tentei essa meta.
Fica tudo enorme no celular quando faço isso.
Mais alguma ideia?
1º descomente o isso:
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
>
Citar
<!-- Isso é um comentário HTML não será interpretado pelo dispositivo que o ler -->
2º - Arrume todo o head:
Não se deve linkar arquivos antes de qualquer <meta>
3º Não use <div id> Isso é muito grotesco, e vai contra os princípios de desenvolvimento responsivo onde o reaproveitamento por ajuste é crucial, coisa que com ID não se dar para fazer.
Cuidado com position absolute, deve-se ter cautela em usar essa propriedade em design responsivo.
Bem, é isso que tenho para lhe aconselhar.
E como o amigo disse... o Bootstrap é uma boa alternativa, mas só dar bons resultados para quem já tem muita experiência em front-end.
Cara, procura por BootStrap, é um framework css que ajuda exatamente nisso que você está procurando
http://getbootstrap.com/