How to make buttons responsiveBrowser Info Environment
I was wondering what I am supposed to do to make the buttons responsive? When I shrink my browser the text disappears into the white background because the span is in it's own field and not flowing with the background block. How can I make it so the button expands in size to be able to compensate with the lines of text?
Actually the buttons are responsive and the text is flowing but it is really meant to be a 1 line text at all time because of the way it is centered vertically.
The text is centered vertically using line-height. So if the button has a height of 50px the script gives it a line-height of 50px as well so the text is centered vertically.
The result is when the button shrinks too much, the text wraps to the next line which is then 50px below the first one, so outside the button.
You should choose a button size that accommodates the space available.
With an icon at the left or right of the text or no icon, the text wraps normally following the behavior I described above