Large button UNresponsive

[bartwindrum]

Hi Jason,

I’m using the large size button on my forthcoming landing page and just discovered that it’s not responsive. Several of the buttons use long text phrases but the buttons don’t break into multiple lines when I preview the browser window made narrow to simulate a phone. I had thought that the button would get taller and that its text would break into several lines. What’s the fix?

Topic

[Jason Bobich]

I’m afraid I’m not quite sure what you mean. Can you link to a specific example?

[bartwindrum]

Sure: http://axiomaction.com/webinar814/ . You’ll see that when you resize the browser window to as skinny as possible the buttons don’t reflow but rather extend and bleed off the right side of the viewing area.

[Jason Bobich]

I see now. This is just default behavior of Twitter Bootstrap buttons (the third-party frontend framework the theme uses for this stuff). I don’t think they’re intended to be used in the way you ware with long text strings.

Here’s how you would override it, though:

.btn {
	white-space: normal;
}

[bartwindrum]

Thank you Jason! That is so cool. I seem to use lots of things in ways unenvisioned by developers, don’t I? 🙂

To this lay person’s eyes that’s a very strange line of code to cause button line breaks…like coming at the issue obliquely and from the back side, or something…

[Jason Bobich]

I think it’d make more sense to see the original declaration that you are overriding:

white-space: no-wrap;

This means that’s the text will never wrap around itself. So that makes sense for what you were seeing before. It’s not that the button wasn’t “responsive”, it was that the text was wrapping onto the next line when it ran out of room.

[Author]

Replies