Menu titles cut short on mobiles

Midways

I am working with V2.1.0

If you look at the images below you can see that the menu title is cut when seen on a mobile depending on the size of the screen. The first image shows as seen on a computer, in this case the ( Margherita - Deep Special with four cheeses special ) and the second image is how it is seen on a mobile.

Can line breaks be added to accommodate the length of a menu description so it shows on all mobile screen sizes.

Midways

Just wondering if anyone knows how to fix this.

Midways

Looking at the stylesheet.css

/main/views/themes/tastyigniter-orange/css/stylesheet.css

Find the following: } .menu-name { display: block; color:#444; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

And change to:

} .menu-name { display: block; color:#444; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: normal; }

So now the menu titles are not cut short, see the before and after images..