Base Apparel responsive page [HTML, CSS, JS]

Community feedback

• 

  Felipe Amorim•680

  @FelipeCastroDEVPosted about 2 years ago

  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

  0