Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Craig Garrity
Craig Garrity
23,692 Points
Posted by Craig Garrity
Craig Garrity
23,692 Points

Recreate background image infobar with HTML/CSS (Responsive)

Hi all, personal project just looking for any input. I'm looking to recreate the background image used in this example As you can currently see it is just using a class and some positioning to display the relevant threat icon. I need to recreate this using just HTML & CSS and make it work responsively, but i'm struggling where to start or what would be the best practice to provide a cross browser solution that is responsive.

I'm open to it changing if needs be, the main thing is it displays the information clearly. Obviously it will need to work on smaller resolutions where it could maybe stack on top or display in two rows of three etc. I have tried searching on Google for inspiration, but it's bringing mixed or irrelevant results possibly due to my incorrect search phrasing.

Closest thing I can seem to find are progress bars. I have uploaded the image here if it helps