lucas-cassimiro
commented
8 months ago A tela de cadastro para mobile está concluída.
Ao chegar em 800px, a barra lateral (sidebar) fica embaixo, para uma melhor experiência do usuário. Além disso, a "width" da tag FORM estava em 700px, o que torna a largura fixa, então, ao chegar em 800px de largura eu alterei para "100%", desse modo, eu consigo aplicar a propriedade "min-width", para que ela se ajuste conforme o tamanho de tela.
Também foram aplicadas algumas propriedades: no seletor "#page-create-collective main", eu apliquei "margin-left" para que ele tenha um espaçamento lateral, desse modo, evita que quando a tela for diminuindo, a sidebar fique por cima do conteúdo. -> IMPORTANTE: O margin-left é removido quando chega em 800px.
Nessa mesma tag, apliquei também um padding para todos os lados, para arrumar os espaçamentos e ficar algo mais "limpo" e os elementos não ficarem grudados.
Objetivo: Desenvolver uma versão otimizada para dispositivos móveis da tela de cadastro do nosso aplicativo/site. A tela deve ser intuitiva, fácil de usar em dispositivos de tela pequena e compatível com diferentes sistemas operacionais móveis.
Design Responsivo: A interface deve se adaptar a diferentes tamanhos de tela, mantendo a legibilidade e usabilidade. Utilizar grids flexíveis, imagens responsivas e consultas de mídia (media queries) para garantir uma boa visualização em todos os dispositivos.