Responsive landing page usind CSS Flexbox and Media Query

Community feedback

• 

  P

  Luciano Lima•1,270

  @LucianoDLimaPosted about 1 year ago

  Salve, jovem! Parabéns pelo projeto

  Sobre o CSS, algumas dicas:

  • Nunca use porcentagem para margins ou paddings. Opte por usar px, ou rem esse articlo explica melhor sobre quando usar px ou rem. Mas se você estiver na dúvida, use rem.
  • Você separou o illustration e content (falando por classes pra você conseguir achar) que fica meio confuso. Se você quiser que dois itens ocupem metade da tela, você pode usar grid:

  .exemplo-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr); // O 2 é o tanto de colunas que você quer, no caso 1 quando for mobile, e 2 quando for desktop, use media query para alterar
  }
  

  Isso vai dividir dois pela metade. Você também pode usar Flex pra isso e você precisaria alterar alguams coisas no seu código pra isso funcionar, como por exemplo alterar o width: 108% da sua imagem para width: 100%. Remover o width: 50% e width:48% do seu illustration e content, teria que mexer em algumas coisas, mas você está no caminho certo! Parabéns ai pelo projeto

  Marked as helpful

  0

  ---

  

  João Pedro•70

  @JohnPGPPosted about 1 year ago

  @LucianoDLima Opa, muito obrigado pelas dicas! Realmente teve muitas coisas no meu código que ficaram bem confusas, vou tentar refazer utilizando essas dicas que você me deu!

  0