[Dúvida] Layout responsivo na pagina do Robotron

Olá, Adriany! Tudo ok contigo?

Que legal que você finalizou o projeto do Robotron e compartilhou com todos no LinkedIn! Parabéns pela conclusão do curso!

Sobre o problema de responsividade na página, é importante garantir que o layout se adapte corretamente a diferentes dispositivos, como smartphones e tablets.

Porém, como eu não tenho acesso ao SEU projeto, eu não consigo ir muito a fundo nisso, mas se você não se importar de compartilhar o código do seu projeto para que eu dê uma olhada e teste algumas coisas.

Dessa forma, eu posso lhe ajudar a ajustar o layout do projeto Robotron para que ele fique bem em dispositivos móveis e em dispositivos maiores.

Oi Renan! Tudo bem também. :)

Vou colocar os links dos códigos que estão no meu GitHub porque inicialmente copiei e colei aqui, mas a mensagem acabou estourando a quantidade de caracteres para ser enviada.

• O código HTML https://github.com/adrianycmc/robotron-2000/blob/projeto_inicial/index.html

• O código CSS https://github.com/adrianycmc/robotron-2000/blob/projeto_inicial/css/style.css

A minha tentativa foi criar uma classe no main do HTML pra puxar uma tag container no CSS:

<main class ="testerobocontainer">
</main>

No CSS comentei as duas partes do @media screen e criei para testar:

@media screen and (max-width: 1200px) {
    .testerobocontainer {
    flex-direction: column;
    }

Provavelmente tem mais alguma coisa pra utilizar junto com a flexbox pra poder fazer dar certo que eu não estou conseguindo sacar. Eu fiz um outro curso aqui na Alura onde eu fui apresentada a esse layout e deu super certo na página que eu estava desenvolvendo no curso, até pesquisei pra poder fazer na página do Robotron, tentei outras propriedades do layout, mas não consegui.

Obrigada desde já pela ajuda! :)

Oi Adriany, tudo bem contigo?

Bom eu gerei aqui um código CSS testando algumas propriedades, e inspecionando alguns itens, na verdade, muitos itens ali estão com medidas absolutas e posições problemáticas.

Então precisaria de uma reconfiguração nele para ele ficar responsivo.

Contudo, para dar uma amenizada na situação eu desenvolvi esse trechinho de código que já ajuda um pouco né.

Aqui:

@media screen and (max-width: 550px) {
    /* Essa classe "testerobocontainer" é a classe da tag <main> que você mencionou que comentou, descomente ela e cole isso no final do seu arquivo css */
    .testerobocontainer {
        display: flex;
        flex-direction: column;
    }

    .robo {
        width: 100%;
        position: relative;
        margin: auto;
        left: auto;
    }

    main > section {
        width: 100%;
        margin: 3rem auto;
    }
}

Se você tiver alguma dúvida em relação com algo que fiz ali é só me perguntar que eu explico, mas ainda vão tem algumas coisas que precisam de ajuste, mas aí eu deixo como desafio para ti, se precisar de ajuda com a aplicação é só falar que estarei por aqui para ajudar tá.

É sempre um prazer para mim ajudar.

Abraços e bons estudos.

Carambaaaa, Renan, tu arrasou demais!! \o/

Faz super sentido criar a classe do robô no CSS pra isolar e passar os parâmetros pra ele conseguir ficar em cima dos controles.

A solução foi ótima, além de dar certo eu consegui entender como ela funciona dentro do código.

Muito obrigada pela colaboração, por se propor demais a ajudar desde o começo e também pelo incentivo!! :)

Abraços!

Oiii, fico feliz que pude ajudar.

Agradeço os elogios!

Caso precise eu estarei por aqui.

Abraços e boa sorte em sua jornada de aprendizado.