@FelipeCastroDEV
Posted
Olha eu fiz umas pequenas modificações no seu código para melhorar um pouco a questão da responsividade..
/*Forcamos um height para foto sempre se manter esticada e usamos o object-fit para a foto corta automaticamente, sem object-fit a foto vai ficar desproporcional.. essa propriedade funciona de forma parecida com background-size e background-position. vale a pena da uma estudada vc ira se deparar com alguns problemas que ela soluciona de uma forma bem simples. */ .container-principal picture img{ max-width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Aqui era onde estava um dos principais problemas, vc usou o padding para tentar distribuir o espaco do conteudo.. essa forma não deixa o elemento responsivo*/
section.anuncio { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
img.logo { max-width: 16rem; /* position: absolute; */ top: 5rem; }
p.descricao { font-weight: 400; margin: 4rem 0; line-height: 3rem; max-width: 40ch; /* essa parte delimita o tamanho do p em 40 caracteres zero, para nao deixar ele livre no container */ }
button.send-btn { position: absolute; left: 200px; /* Ajustado Posicao do botao*/ top: 0; /* Ajustado Posicao do botao*/ height: 100%; /* Ajustado Height do botao para ficar da altura do form*/ border: none; background: linear-gradient( 135deg, rgba(248, 191, 191, 1) 0%, rgba(238, 140, 140, 1) 100% ); padding: 1.2rem 4rem; border-radius: 2.5rem; cursor: pointer; }
isso não vai concerta todos os problemas do código em relação a responsividade é apenas vc ter uma ideia do que fazer na sua segunda tentativa, eu ate pensei em resolver todos os problemas e mandar o código para vc mas penso que iria tirar toda a graça rsrs ja que vc vai conseguir fazer isso sozinha :D
vou te passar o link do código da minha solução para esse desafio está bem simples, caso vc tenha alguma duvida no código pode enviar aqui que eu te respondo.
https://github.com/FelipeAmorimDev/base-apparel-coming-soon-page https://felipeamorimdev.github.io/base-apparel-coming-soon-page/
Ah uma dica, Eu vi que vc deixou a logo com posicionamento absoluto para deixar ela em cima da tela quando muda para celular. Para evitar isso vc pode deixar no topo do documento uma logo com display none e ai colocar um media para qnd passar para o mobile esconder a logo desktop e mostrar a logo mobile, já que a logo quando o site esta em desktop faz parte do container do anuncio. e quando passa para mobile a ordem dos elementos sofre uma mudança. essa foi umas das solucoes que encontrei para esse problema, quando vc ver o meu codigo vai ficar mais claro...
qualquer duvida sinta-se a vontade para perguntar
Abracos
