Flex box, css, html, js

Solution retrospective
Como posso deixar essa página mais responsiva? Observei que em dispositivos móveis ela se comporta mal.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @0xabdulkhaliq
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
DECORATIVE SVG'S ♨️:
- The
alt
attribute is used to provide alternative text for images in HTML documents. Thealt
attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.
- Now, when it comes to decorative
SVGs
, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.
- Since these images do not convey any important information or functionality, there is no need for an
alt
attribute.
- So feel free to set the
alt
attribute as""
for decorativesvg's
, becausealt=""
will be skipped by screen readers they will consider the image as decoration
Example:
<img src="images/decorative.svg" alt="">
<img src="./images/icon-star.svg" alt="estrela" class="image-star"> 👇 <img src="./images/icon-star.svg" alt="estrela" class="">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
- @shaikfirdos786
Hi bro,
First of all thank you, because your javascript code helped me alot.
I would like to suggest something about positioning.
Instead of using position in your code
you can use flex or grid to position the card
body { display: flex;
flex-direction: column; align-items: center; justify-content: center; height: 100vh;
}
This will position the card in center .
overall the code is nice and helped me alot to complete the challenge.
- @mpadilhaa
boa noite amigo, eu recomendaria em todo projeto começar primeiro pelo mobile, isso facilita a codificação e diminui codigos desnecessarios, tenho dificuldade com responsividade e isso me ajudou mt. Olhei o codigo la no seu git, ao meu ver o uso de "positions", acaba interferindo um pouco, quando colocado em 375px de width vc nota que abre o scroll lateral, causado pelo position do card. Uma forma facil de centralizar o card seria utilizando margin, exemplo:"width:130px auto" dessa forma ele centraliza na tela, sendo desnecessario o position. Eu te segui no git, ja fiz esse desafio, se precisar de alguma base do css pode conferir no meu perfil. vlw e bora codar.
Join 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