Twitter Bootstrap's responsive design

Question

On my phone, the text in my hero unit here doesn't fit well. I want it to wrap or shrink or something. Any suggestions with details on implementation? Thanks.

Answer 1

If you want to shrink it, one option would be to redefine the H1 size and possibly the hero padding for small screens. By default both are 60px, so you could use media queries with something like

@media (max-width: 767px){

.hero-unit h1 {
font-size: 40px;
}

.hero{
padding:40px;
}

} 

You might need to play with the padding, the font size and the viewport max-width to get the results you want, but this should get you started.

Good luck