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
Lisa Pollack
4,603 PointsHow does one make the button group (as demonstrated) work for small screen?
At the end of the video, Guil demonstrates the page's responsiveness. However, it appears that by using class="btn-group", the design looks odd for small screen sizes (purely with respect to the lower buttons). This is briefly seen in the video at the end, when the "Text me the link" button moves below the "Download the app" button.
An ideal behaviour would perhaps be for the buttons to 'lose' that class at small screen sizes, so that the upper button's right corners and the lower button's left corners become rounded again and they get a bit of breathing room between them.
What is best approach to accomplish this using Bootstrap so that the example in this lesson works even better at small screen sizes?
Many thanks in advance for thoughts on this!
1 Answer
eck
43,038 PointsI think the easiest option would be to use media queries. Target the screen size where you dislike how the buttons are rendered and then redefine the style for .btn-group > .btn.
I would encourage you to inspect your css for these buttons with the dev tools for which ever browser you are using, and fidget with the styles. This can give you a better idea of what to write in your media query.
I hope that helps, if you have any questions let me know! :D
Lisa Pollack
4,603 PointsLisa Pollack
4,603 PointsThank you, Erik! That's helpful.