Responsive font on Rise

Hi James_Bonney you can force the words to not break, but using the following CSS (replacing "{selector}" with the correct selector:

{selector}
{
     word-break: keep-all;
     overflow-wrap: normal;
}

What will happen though is that the words will be forced to overflow. In the example you posted, the E of INTERACTIVE would overlap the edge of the device and E would be very tight. 

This issue is, a single word is wider than the container, so it can only break, overflow, or show an elipsis.

The best solution, is to reduce the font slightly for mobile using a media query. The word "INTERACTIVE" is the target word to fit on a single line. As long as that word fits, they all fit, and words will not have to be split. It looks like you only have to change the font-size down a point or two.

@media(max-width: 767px) {
    {selector} {
        font-size: {font-size-and-unit}
    }
}

Replacing {selector} with the relevant selector and {font-size-and-unit} with the correct size and unit, eg 1.5rem;

I would therefore go for a combination of both:

@media(max-width: 767px) {
    {selector} {
        font-size: {font-size-and-unit}
        word-break: keep-all;
        overflow-wrap: normal;
    }
}

Hi SamHill 

Thank you for your explanation.

Sorry if this is stupid, but can you explain the {selector} part to me, or provide a useable example that I could adapt? I'm not too familiar with the different tags, or CSS.

Thanks
James