Mobile/responsive text formatting

[whitelobster11]

Hello

I have a post on my site which is a poem

Because it is a poem the location of the linebreaks is important

Is it possible to set the post to keep the linebreaks as they are on mobile and desktop so that lines are preserved and resized rather than the text flowing onto the next line?

Also the headers on this post look great on desktop but on mobile they chop the lines in strange places

The Desire To Be Everything / The Five Monologues of Dr Ythros - Mother Culture

on desktop it reads
THE FIVE MONOLOGUES OF DR YTHROS
ALLISON BULGER

on mobile it reads:
THE FIVE
MONOLOGUES
OF DR
YTHROS
ALLISON
BULGER

I would like to have it read:
THE FIVE
MONOLOGUES
OF
DR YTHROS
ALLISON
BULGER

OR the following scaled responsively:
THE FIVE MONOLOGUES OF DR YTHROS
ALLISON BULGER

Is there a way to make the header text linebreaks different on mobile than desktop OR have the header be responsive on mobile so as to keep the line width the same?

[paul.r]

Hi,

You can make the font size smaller in mobile using cornerstone responsive text feature to preserve the linebreaks.

Please see video

Hope that helps.

[whitelobster11]

What if I don’t want to use cornerstone but want to keep everything editable within the standard post format?

[christopher]

Hi there,

Then you will need to use custom CSS code to do have such a feature, You can use the media queries to determine when it is the time to make the font smaller.

For example, you wrap the text to a paragraph with poem HTML class so you can have a CSS code like this which you can add to X > Theme Options > CSS:

@media (max-width: 1200px) {
	.poem {
		font-size:  20px;
	}
}

@media (max-width: 968px) {
	.poem {
		font-size:  18px;
	}
}

@media (max-width: 767px) {
	.poem {
		font-size:  15px;
	}
}

The code above is hypetetical and I just wanted to show how it might work.

Thank you.