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
William Luce
983 PointsBackground color width fitting the text
Good morning all. I'm trying to put white text is a black box (like the white text in a red box at http://www.specialized.com/us/en/bikes/mountain), but the background color is extending to 100% of the container. Is there a way to have the background color fit the text by obeying only padding rules?
I don't want to put a fixed width on the box as the site is responsive.
6 Answers
Adam Soucie
Courses Plus Student 8,710 PointsWilliam,
I'm getting a 404 error on your link.
William Luce
983 PointsI fixed it up there too, but here's the link. Thanks for letting me know.
Adam Soucie
Courses Plus Student 8,710 PointsTry containing the text in question in a div, and then using CSS to style it.
seth123
Courses Plus Student 226 PointsThere are multiple solutions depending on your coding situation and preference. I'll look at your source code but depending on what code is in the back-end I might not be able to see enough to answer this.
You can do this with a SPAN class, or a DIV ID - either of which I would recommend as they will give you the greatest reliability and not cause conflict with reactive functions of the website.
seth123
Courses Plus Student 226 PointsNot sure if offsite linking is against any rules here - but here is an article that may beautifully answer your question.
http://www.dotvoid.com/2011/10/background-color-for-inline-text/
William Luce
983 PointsThanks Seth! That's just about perfect! It's odd that this is such an issue. In looking at the source, this looks like exactly what they did on the site in question.