Fylo Data Indicator Challenge

Solution retrospective
I was unsure if I had correctly used css to correctly position my speech bubble. Any suggestions?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @brasspetals
Hi, GregsGrog! Congrats on completing another challenge! 🎉
The way you have done the speech bubble works, but alternatively the triangle could have been created as a
::before
or::after
pseudo-element of.info-box
.A few other suggestions:
- To better match the design for mobile, I suggest changing
background-size
on the.background
div tocover
rather than set dimensions. Getting rid ofheight
and replacing it withmin-height: 100vh
will also make it more responsive. - Browsers automatically apply a bit of margin to
body
, which is preventing your background images from filling the whole page. Addingmargin: 0
will fix this. Because browsers have some default styling, many web developers will use a “css reset” on their projects. Here’s a good article about it if you’re curious. 😄 - Kudos to you for using a
progress
bar here. When I did this challenge about a year ago, I tried to use both aprogress
bar and ameter
element, but could get neither to style correctly across all browsers. Not sure if much has changed, but they are a NIGHTMARE to style. If you wanted to match the design, you could try it out with just some plain divs for practice.
Marked as helpful - To better match the design for mobile, I suggest changing
- @shashreesamuel
Hey good job completing this challenge
Keep up the good work
Your solution looks great however I think your progress bar needs to be rounded.
In terms of your accessibility issues simply wrap all your content between main tags.
I hope this helps
Cheers Happy coding 👍
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