@brasspetals
Posted
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-sizeon the.backgrounddiv tocoverrather than set dimensions. Getting rid ofheightand replacing it withmin-height: 100vhwill 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: 0will 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
progressbar here. When I did this challenge about a year ago, I tried to use both aprogressbar and ameterelement, 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
@GregsGrog
Posted
@brasspetals I appreciate the help! css reset seems perfect! I dont know why it wouldn't start with a clean slate as default ... As for the progress bar, I know what you mean. I dont think I managed to get it completely done but im only giving myself a day to complete each challenge so ran out of time!
Thanks for the advice!
@GregsGrog
Posted
@brasspetals I updated my solution and managed to get my progress bar to style correctly! Still playing with adding cover instead of setting a height. Thanks for the help!
@brasspetals
Posted
@GregsGrog Just took a look - that's awesome! 🙌 I wonder how you might get a white dot in there that would be responsive to the value of the progress bar. I'm sure you could use a pseudo-element like ::before or ::after. Might have to use some JS to get its position properly tied to the value. 🤔 Enough of my rambling - anyway! Excellent job on getting it cross-browser compatible! 🎉
Background image responsiveness can be a tricky business that involves a lot of fiddling. cover and contain are handy and fun to play around with. I do my best to avoid giving large divs/elements a set height, and generally allow content to dictate the height instead. Visually, however, especially for mobile screens, setting the container to have a minimum height of the viewport can be useful. Again, it's all fiddly and personal preference. 😄
