Responsive "display" classes in bootstrap

Hello all,

I’m working on my “tribute page” project and I’m aiming to make it fully responsive. Here’s my CodePen:

The issue I’m having is that I’m using the “display-1” and “display-2” bootstrap classes to style the header. I really like them, but I’m having trouble making htem responsive on mobile.

I’ve used the “responsive typography” CSS as outlined in bootstrap, and that’s helped some. As the project stands now, the header looks pretty good even in the “iPhone 5” developer preview on Chrome, which is great, that’s what I want. But those display classes aren’t as big as I want them on my desktop.

When I change the base html font-size in my CSS, I notice a size change in my desktop, but when I change any of hte @include, I don’t. Which is weird. I estimate I’m on about a md resolution.

Thanks for any help!


On my desktop I see everything well; it takes up my whole screen.
But on my phone, the word “Video Retrospective” is off the chart.

It seems that every system will have a different look.
You should perhaps play with the “col-xs” to see if you get other results.


P.S. Your site looks good!