Responsive landing page using CSS Grid and JavaScript Vanilla.

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 5 months ago

  Olá Flávia, parabéns pela conclusão do seu projeto, ele ficou muito bem feito.

  Sobre sua duvida, para remover essa barra lateral de rolagem, basta adicionar o seguinte trecho ao seu seletor body: overflow-x: hidden;, após isso você verá que estará sem a barra de rolagem, mas, ainda será possível mover na horizontal em celulares, então também adicione esse trecho:

  .slides {
      overflow-x: hidden;
  }
  

  E uma dica quanto ao seu CSS, ele está extremamente enorme, são mais de 600 linhas de estilização, isso acaba deixando seu CSS muito verboso. Para corrigir ou evitar isso, você pode adicionar seus responsivos em um outro CSS, exemplo um responsive.css, reset.css, font.css e por aí vai, dessa forma você deixa mais organizado seu projeto. Lembre-se de fazer o link desses outros arquivos CSS no seu HTML.

  Uma outra dica, agora quanto ao seu JS/HTML, eu vi que no seu HTML você adicionou um onclick, isso não está errado, mas não é recomendável, e no caso do seu projeto ele acaba sendo repetido tanto no seu JS externo quanto nesse trecho inline de JS. O melhor é sempre utilizar a forma externa e não utiliza-lo no HTML. E quanto a forma que você fez pra referenciar os botões, ela não está errada, mas geralmente quando vamos criar uma referência para nosso JS nós utilizamos id's ao invés de classes. Id's fazem o papel de criar uma referência entre HTML e JS, enquanto classes fazem o papel de criar uma referência entre HTML e CSS.

  E é isso, novamente parabéns, caso tenha ficado qualquer duvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0
• 

  P

  Flávia Reis•650

  @flaviare1sPosted 5 months ago

  Bernardo, muito obrigada pelas dicas! Eu estava colocando o overflow hidden no local errado, por isso não estava funcionando. Obrigada mesmo! :)

  1