Responsive landing page using CSS Grid and JavaScript Vanilla.
Design comparison
Solution retrospective
I couldn't get the side scroller out of the site. Would there be a way to fix this? Feedbacks are welcome!
Community feedback
- @R3ygoskiPosted 4 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 helpful0 - @flaviare1sPosted 4 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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord