Centered lines on desktop version appearing as orphan lines on mobile

[Janani]

Dear Team

Not sure if this is something that you can help on.
There are some quotes that I have centered in the website – they look good on desktop.
But on mobile, as there is little space, they look like orphan lines – not very good.
For example, in this subsection (url provided), there is a quote that is centered and looks good on desktop. But on mobile, some of the words appear as orphan sentences.
Is there any way we can align them on mobile just like how they look on desktop, or should we reduce the size of font on mobile?

[Leo]

Hi there,

Can you specify which quote I should be looking at?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janani]

“Care about your children,
Just bless them instead of worrying,
as every child is the little Buddha, who helps his parents to grow up” – Buddha

[Leo]

What do you mean by orphane lines?

This is what I see on the mobile simulator:
https://www.screencast.com/t/zsNyxl3Ro1to

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janani]

Hi Leo

Yes, that’s how it looks like on the mobile simulator, but on a real mobile, it looks different.
Please refer to screenshot link taken from a real mobile. Can you see the orphan line?

Warm regards,

[Leo]

That’s because you have <br> tags added?
https://www.screencast.com/t/OZsxkhCxC

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janani]

Hi Leo

Yes, I just noticed that. But when I removed the br tags, the entire quote appears together as one line.
I want the quote to appear in separate 3 lines – both in the desktop and mobile versions. But in the mobile version, due to lack of space, it appears as an orphan line. For example,
‘Just bless them instead of worrying’ must appear in the same line. But in mobile, it appears as:
‘Just bless them instead of
worrying’

Is this something we can do anything about?

Warm regards,

[Leo]

I want the quote to appear in separate 3 lines – both in the desktop and mobile

Unfortunately I really don’t see a way to make this happen on all screen widths.

Looks like you’ve removed the <br> tag and it’s working much better now?
https://www.screencast.com/t/y0Xhqh4VtbMu

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janani]

Dear Leo

Thanks, looks like there is no solution to this.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts