Ok, I have let you suffer enough.
The easiest way to accomplish this without changing the font size, making it an image, reconfigure the entire layout etc. Is to first find the exact pixel where the break happens. Which in this case is 375px. Now we have to remember that different browsers render differently so we want to add in some extra px's to be safe. I normally use 5 extra px's as most browsers do not go above that.
So starting at the 380px breakpoint we need to define a rule that allows the font size to stay the same, however, make the text smaller. How can we do this? Simple.
But before we get into that lets talk a little bit about Astro Physics and what happens at the event horizon of a black hole. At the event horizon of a black hole time starts to bend and become... Yeah, we do not have enough time to talk about that.
Where was I? Oh yes, simple.
letter-spacing: -2px; will decrease the letter spacing of the word to allow for both words to fit on one line all the way down until you get to 320px breakpoint in which the columns are then 12 spans each. Just remember you would need to remove the -2px spacing at that breakpoint if you wish as it is no longer needed.
If you would like you can set -1px letter spacing and reduce the font size to 24px which would give you the same effect, yet with smaller text.
Remember, first find the problem, look for solutions, consider which is the best, and test your two top picks. If neither works, then you did not find the real problem and must start again.
Time for me to get my cat nap and then back to work!
