I have a div inside which there are 4 buttons, but the text excels the div by reducing the screen
my html
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
{{ Form::button(nombre, ['class' => 'btn btn-giant btn-primary', 'id' => 'button', 'title' => 'Descriptio', 'onClick' => "submit"]) }}
</div>
</div>
This is my css
.btn-giant {
width: 100%;
height: 40vh;
font-size: 40px !important;
white-space: pre-wrap;
}
The problem is that the font size is fixed, regardless of the size of the window. You should make the size of the font change according to the size of the viewport so that it always enters the text, or at least make it proportional to the dimensions of the browser, something like this:
.btn-giant {
width: 100%;
height: 40vh;
font-size: 6vmin !important;
white-space: pre-wrap;
color: red;
}
In case of using these measures (vmin, vmax, vh, etc.) you should see the compatibility of the browsers where it will be used. On this site you can see it: Can I Use .
I hope it serves you.
Good luck!