html-css
html-css copied to clipboard
gustavoguanabara
dúvida-botões
Boa tarde Galera!
Estou fazendo o desafio de Tela Login, na parte final, meus botões não aparecem na resolução para tela grande, somente para tablet e smartphone
Suponho que seja algo com as Medias já que neste desafio é usado Mobile First (informe caso não tenha feito o mesmo).
Com isso, certifique-se de que não tem nada nas @media(s) afetando: inspecione esses elementos cada que estão sumindo e redimensione a tela e veja qual @media está fazendo isso e verifique no painel aberto o que está acontecendo a esses elementos caso não tenha achado nada nas CSSs.
EDIT:
Esse painel é o DevTools, muito útil pra debugar seu código
dei uma mexida aqui e agora os botões funcionam na tela maior.
estou usando essas aqui:
@media screen and (min-width: 768px) @media screen and (min-width: 992px)
a tela do login só voltou a aparecer os botões quando acrescentei na: @media screen and (min-width: 992px) "" and (max-width: 1280px)""
Agora os botões aparecem nas três telas, será que era só isso mesmo ? será que o erro é por que meu monitor têm 24 pol ?
só que, agora quando redimensiono a e tela login entre os 3 tamanhos, chega um momento que tudo fica sem informação até eu terminar de ajustar e daí, volta a aparecer novamente:
quando chega por volta desta dimensão, fica assim, tudo branco, mas quando aumento a dimensão, aí volta a aparecer com botões e etc
o que eu percebi foi :
depois de deixar
@media screen and (min-width: 992px) and (max-width: 1280px)
quando passa dos 992px a tela fica branca como mostra a foto acima, e só volta a aparecer tudo quando chega nos 1280px...
mas só deixando dessa maneira, com : (max-width: 1280px) que os botões e textos voltaram a aparecer, se eu tirar, na tela grande nem aparecerá os botões e textos : (
Você inspecionou os elementos no Dev Tools? Você pode selecionar esses elementos e vê o que acontece com eles. Não parece ser display, veja se não seja algum outro elemento influenciando. Darei uma olhada no seu repositório.
Você inspecionou os elementos no Dev Tools? Você pode selecionar esses elementos e vê o que acontece com eles. Não parece ser
display, veja se não seja algum outro elemento influenciando. Darei uma olhada no seu repositório.
Sendo franco, pelo DevToll, pra mim ficou mais complicado de entender, então, fiquei mexendo no css das media query, segue o link do projeto, e se puder dar uma olhada no repositório, quem sabe vc consegue me ajudar! se não, eu posto o código fonte aqui tbm
https://brunnoduarte07.github.io/projeto-login/
Amigão, vendo aqui seu código pelo DevTools, você deu largura de 50% tanto pro formulário quanto pra imagem no intervalo de 1280px a 992px, ou seja, de acordo com a largura do conteiner, #login, cada um ficará com a metade da largura dele, mas não foi o caso, a regra da mídia anterior ainda fazia efeito, portanto o #formulario ficou em baixo por ter 70% do tamanho total:
Vendo as regras com mais atenção, no seletor do seu formulário, na última mídia, é #formulário enquanto no seu HTML é #formulario, hahaha!
Amigão, vendo aqui seu código pelo DevTools, você deu largura de
50%tanto pro formulário quanto pra imagem no intervalo de 1280px a 992px, ou seja, de acordo com a largura do conteiner,#login, cada um ficará com a metade da largura dele, mas não foi o caso, a regra da mídia anterior ainda fazia efeito, e então o#formularioficou em baixo por ter70%do tamanho total:
Vendo as regras com mais atenção, no seletor do seu formulário, na última mídia, é
#formulárioenquanto no seu HTML é#formulário, hahaha!
cara, eu fiquei procurando pra ver se não tinha digitado algo errado, sério, e não encontrei até que vc mencionou kkk, droga, bom, consertei essa questão da escrita, a questão dos 70%, foi oq o Guanabara colocou no vídeo, posso ver se ele não mudou dps, bom, agora, não aparece mais a tela grande kkk, vou pensar e pensar e ver se consigo a solução, mas obrigado pela atenção
cara, eu fiquei procurando pra ver se não tinha digitado algo errado, sério, e não encontrei até que vc mencionou kkk, droga, bom, consertei essa questão da escrita, a questão dos 70%, foi oq o Guanabara colocou no vídeo, posso ver se ele não mudou dps, bom, agora, não aparece mais a tela grande kkk, vou pensar e pensar e ver se consigo a solução, mas obrigado pela atenção
Os 70% estão na antiga midia, não deveria afetar essa caso reescrevesse-as. Como tá usando porcentagem, sempre coloque a diferença no outro: formulário com 70% e a imagem 30%, assim nada quebra. Sempre preste atenção.
Este vídeo fala sobre o DevTools, recomendo, veja como a ferramenta ajudou a ver o que tá acontecendo de maneira mais clara. https://www.youtube.com/watch?v=2lBJVEYDwlM
Com o problema resolvido, por favor, feche a Issue.
Amigão, vendo aqui seu código pelo DevTools, você deu largura de 50% tanto pro formulário quanto pra imagem no intervalo de 1280px a 992px, ou seja, de acordo com a largura do conteiner, #login, cada um ficará com a metade da largura dele, mas não foi o caso, a regra da mídia anterior ainda fazia efeito, portanto o #formulario ficou em baixo por ter 70% do tamanho total:
