Reputation: 1775
I have a problem where a wide form button will not wrap to the next line when the browser width is less than the button when displayed on one line.
HTML:
<input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1">
CSS:
body {font-size: 16px;}
.gform_button.button {
background-color: #E96E39;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
hyphens: auto;
word-wrap: break-word;
box-sizing: content-box;
font-size: 1em;
color: #FFF;
font-weight: 700;
letter-spacing: 0.046875em;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
max-width: 100%;
}
How can I make the button wrap to the next line, and be at most 100% of the width of viewport?
Thanks.
Upvotes: 1
Views: 1799
Reputation: 6263
Just add this line of css to your input with the button
class:
white-space: normal;
body {
max-width: 300px; // just to show the result
font-size: 16px;
}
.gform_button.button {
background-color: #E96E39;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
hyphens: auto;
word-wrap: break-word;
box-sizing: content-box;
font-size: 1em;
color: #FFF;
font-weight: 700;
letter-spacing: 0.046875em;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
max-width: 100%;
white-space: normal;
}
<input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1">
Upvotes: 5
Reputation: 149
Set the width to 100% and the max-width to width of the button.
Upvotes: 0
Reputation: 22158
It's an <input>
tag, you can't make what you want, but you can change the tag to <button>
and it works (you don't need the word-wrap
because it's the default value):
https://jsfiddle.net/vqmo9ykg/8/
body {font-size: 16px;}
.gform_button.button {
background-color: #E96E39;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
hyphens: auto;
box-sizing: content-box;
font-size: 1em;
color: #FFF;
font-weight: 700;
max-width: 200px;
letter-spacing: 0.046875em;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
}
<button type="submit" class="gform_button button" id="gform_submit_button_1" tabindex="26" >Help me develop better solutions for small business</button>
Upvotes: 2