Fala galera!
Eu fiz um site para meu portfólio e justamente nele eu tive o seguinte problema:
O site é feito em uma página só, então eu tive que ajustar o tamanhos das sections para o media querries.
Eu fiz tudo usando o "Responsive Layouts" do WebDev Tools do Google Chrome.
Para os celulares em posição retrato, eu mantive 100vh como a altura de cada section, mas para os celulares em posição landscape, eu tive que aumentar para 120vh ou 140vh, já que a altura do viewport fica muito pequena para suportar o conteúdo.
O problema é, o width do celular deitado colide com o width de alguns celulares de pé. Isto está fazendo com que, para certos aparelhos, eu tenha uma sobra enorme.
Eu tenho CERTEZA que eu to fazendo meleca com os breakpoints. Eu sou um dev novo e essa é uma parte que me quebra muito!
Alguém sabe me dar uns conselhos de como arrumar isso e de boas práticas pros breakpoints dos media querries não colidirem?
Código inteiro: https://github.com/lucasemg/porfolio Página: https://lucasemg.github.io/porfolio/
@media screen and (max-width:400px) /*celulares retrato*/
@media (min-width:400px) and (max-width:498px) /*celulares landscape*/
@media (min-width:498px) and (max-width:630px) /*Tablets Pequenos Retrato*/
@media (min-width:630px) and (max-width:818px) /*Tablets Pequenos Landscape*/
@media (min-width:818px) and (max-width: 1200px) /*Tablets Grandes*/
insira o código aqui