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

CSS

Posted by amirbizimana
amirbizimana
9,639 Points

Responsive speach bubble

Looking for some help on how to best tackle this issue.in the link below I have this pen with an H1 that says "BBC RADIO ONE* " and when you hover over the " * " I added some css to make it so a little orange bubble appears saying "exclusive!!". My only grief is that I'm not sure what the best approach would be to make it responsive for smaller screens, so that the bubble becomes smaller and still remains on top of the of the " * ", with text and bubble size adjusting correctly.

https://codepen.io/iambizi/pen/EXLyEN

Any input is much appreciated !

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

This seems to be close to what you want:

div { font-size: 1.1vw; }

But I'm not sure it makes sense to reduce the bubble if you're not also reducing the main font. Of course if you do that, you'll need to adjust the bubble position or change the positioning basis.

Also I found a bug in your HTML, you wrote "string" (with an "i") instead of "strong" (with an "o") in the end tag.

Finally, I noticed you were using JavaScript/jQuery for fading. But you could do that entirely in CSS using transitions.