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!
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
Bill Shannon10,327 Points
h4 heading and span alignment issue in xs view
Is there a way to have part of the title "Keynote: Internet of Things" drop when grid is in xs view? The issues I'm having the title is pushing the span pill out of the grid.
Bill Shannon10,327 Points
Thanks for your help, I was able to figure out what I was looking for:
This is for the first .list-group-item in the #schedule section :
<h4 class="list-group-item-heading">Keynote<span class="hidden-xs-down">: Internet of Things</span><span class="label label-info label-pill pull-xs-right">9:00am</span></h4>
Frank Cooke6,656 Points
Wrap part of the title in a <span></span> or any other inline/inline-block element inside of the <h4></h4>. Then give the span a class of hidden-xs.
Adam Pinsky22,804 Points
Hi Bill, I'll apologize in advance. I am typing on my phone during my daily commute, and don't really have access to the workstation to test out my suggestions. However, I did just finish this course myself and bootstrap is still fresh on my mind. If I understand correctly you are wanting to have the label for the time of the speech to wrap around to the next line on xs screens. I can think of a couple of ways of dealing with the situation. Again these are just off the top of my head without having really tested them out. Bootstrap will vertically stack elements that are siblings within a row container.. however, for styling reasons Gil repositioned the span element with the .label class so that it is a child of the h4 element. I believe that if you simply make the H4 and span elements siblings by removing the span from H4 node and placing it back into the list item element should get it to do what you want. If you do it this way, you will also need to add a CSS rule targeting the span to adjust the text size. (It's possible that, if you check the Bootstrap docs for a helper class relating to 'overflow' or 'wrap', there might be some work around there. But I can't say for sure.) Personally, I would take it a step further by adjusting the list item's layout for the xs screen size. For instance, I might add classes so that the H4 and span switch positions on xs screens. I hope that you're able to discover a solution from these suggestions. I'm sorry I don't have a solution that is tried-and-true on hand at this point in time. Let me know how it works out and good luck!