cursoemvideo / cursoemvideo-html5

Material do Curso de HTML5 e CSS3 do Curso em Vídeo
MIT License
2.42k stars 158 forks source link

Problema com dimensões do projeto Android no celular #39

Open Carol-Sousa opened 1 year ago

Carol-Sousa commented 1 year ago

Quando abro o site no meu celular, as imagens ultrapassam o main, já tentei alterar o width e padding do main e a max width das imagens, mas continua assim WhatsApp Image 2023-09-29 at 19 00 40

mazklau commented 1 year ago

Tem que trabalhar com porcentagem em cima de width

Em sex., 29 de set. de 2023 7:00 PM, Caról Sôusa @.***> escreveu:

Quando abro o site no meu celular, as imagens ultrapassam o main, já tentei alterar o width e padding do main e a max width das imagens, mas continua assim

— Reply to this email directly, view it on GitHub https://github.com/cursoemvideo/cursoemvideo-html5/issues/39, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUFO5NGYINZ4G4M6JLTODL3X45AHDANCNFSM6AAAAAA5NBH6KA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

mazklau commented 1 year ago

No caso se ela tive div você colocar

Div img {

  Width : % ou VW ;

}

Em sex., 29 de set. de 2023 7:00 PM, Caról Sôusa @.***> escreveu:

Quando abro o site no meu celular, as imagens ultrapassam o main, já tentei alterar o width e padding do main e a max width das imagens, mas continua assim

— Reply to this email directly, view it on GitHub https://github.com/cursoemvideo/cursoemvideo-html5/issues/39, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUFO5NGYINZ4G4M6JLTODL3X45AHDANCNFSM6AAAAAA5NBH6KA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

Carol-Sousa commented 1 year ago

Obrigada, vou tentar

wanderssonmo commented 1 year ago

Oi Carol, tudo bem? Você conseguiu corrigir o problema?

wanderssonmo commented 1 year ago

Vou tentar te ajudar, veja o passo a passo abaixo:

  1. Vai nessa parte do seu código: <img src="imagens/bugdroid.png" alt="bugdroid">

  2. Cria uma classe pra ficar da seguinte forma: <img src="imagens/bugdroid.png" class="pequena" alt="bugdroid">

  3. AGORA NO SEU ESTILO: Cria um estilo desta forma, se quiser pode copiar e colar e depois faz o seu ajuste. Tenta aí e depois me fala se deu certo. main img.pequena { max-width: 350px; display: block; margin: auto; }

Carol-Sousa commented 1 year ago

Obrigada!! Deu certinho