search

gustavoguanabara / html-css

Curso de HTML5 e CSS3
https://gustavoguanabara.github.io/html-css/
MIT License
13.96k stars 3.35k forks source link

Problema no site quando abro o site no celular #656

Closed SamuelFilipe04 closed 2 months ago

SamuelFilipe04 commented 2 months ago

tanto meu header, quanto nav, no css ou no html, está exatamente igual do professor guanabara, mas quando eu abro o site no celular no celular, a nav onde fica os menu(home, noticias, contatos), está visualmente por cima, do meu paragrafo "Tudo aquilo que você sempre quis saber sobre o mundo Tech, em um único lugar", ja tirei a margin e coloquei o padding de 50px e mesmo assim n deu.. oq sera q pode ser?

BenjamimCS commented 2 months ago

Veja se não há outra regra interferindo. Use o DevTools e veja você mesmo como o seu site tá se comportando.

Warley-sc commented 2 months ago

coloque uma foto para saber o que está está acontecendo, mas muito provavelmente é por conta da responsividade, se o site foi feita apenas para um tipo de tela ele só vai funcionar naquela tela, tente um "@media screen" para definir os padrões de comportamento para determinadas telas definindo as larguras

tanto meu header, quanto nav, no css ou no html, está exatamente igual do professor guanabara, mas quando eu abro o site no celular no celular, a nav onde fica os menu(home, noticias, contatos), está visualmente por cima, do meu paragrafo "Tudo aquilo que você sempre quis saber sobre o mundo Tech, em um único lugar", ja tirei a margin e coloquei o padding de 50px e mesmo assim n deu.. oq sera q pode ser?

SamuelFilipe04 commented 2 months ago

image

Meu nav está "embolado" no celular..

Warley-sc commented 2 months ago

É por causa do responsivo, o seu site não está adaptado para telas menores e por isso dá esse conflito, vc terá que usar um "@media screen " para definir a partir de que momento o site terá que se comportar de outra forma entra no site da w3schools, lá eles falam sobre como funciona a questão da responsividade

BenjamimCS commented 2 months ago

Pelo print só vendo o código mesmo. Você tá usando height no seu header, o prof. usou min-height. O problema surge quando se diminui a largura do viewport, a página.

Dica: aprenda a usar o devtools do seu navegador, é muito útil para debugar o seu código.

Já dizia o mestre Guanabara: se tivesse igual era pra tá funcionando.

SamuelFilipe04 commented 2 months ago

Pelo print só vendo o código mesmo. Você tá usando height no seu header, o prof. usou min-height. O problema surge quando se diminui a largura do viewport, a página.

Dica: aprenda a usar o devtools do seu navegador, é muito útil para debugar o seu código.

Já dizia o mestre Guanabara: se tivesse igual era pra tá funcionando.

Cara, pior q eu lembrei dessa frase dele e por isso conferi 50x antes de vim aqui comentar e mesmo assim deixei passar esse detalhe.. consegui aqui, mt obrigado!

SamuelFilipe04 commented 2 months ago

É por causa do responsivo, o seu site não está adaptado para telas menores e por isso dá esse conflito, vc terá que usar um "@media screen " para definir a partir de que momento o site terá que se comportar de outra forma entra no site da w3schools, lá eles falam sobre como funciona a questão da responsividade

Estava mais fácil concertar do que eu imaginei kkkk nessa época eu ainda n tinha aprendido media query e nem saberia usar o @media screen, mas mt obrigado amigo!

BenjamimCS commented 2 months ago

É isso mano.

Com a Issue resolvida, por favor, feche a Issue. Bons estudos!