Verse Block Doesn’t Maintain Formatting on Mobile

  • hannahhuff2018

    (@hannahhuff2018)


    7 years, 9 months ago

    Hello,

    I appreciate how easy Gutenberg is to use, but I’m having an issue with the Verse block.

    The block maintains the correct verse formatting on desktop, but on all mobile devices, it does NOT maintain line breaks. Instead, it turns into a single line of text that you have to scroll and scroll through to read.

    I’m trying to use this block for a post demonstrating poetic line breaks, but you can’t see the line breaks on mobile devices, so the block is essentially useless/not performing its intended function. Is there any way to avoid this? I’ve checked the HTML and it shows that there’s a <br> within the verse block.

    You can see what I mean approximately halfway down the page on my blog post: https://notesofoak.com/discover-literature/poetic-line-breaks-guide/

    Thanks for you help,
    Hannah

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Marius L. J.

    (@clorith)

    7 years, 9 months ago

    Hiya Hannah,

    I had a quick look on your site, and I’m unable to spot the verse you are referencing here, was it changed after creating this topic?

    I did try to make my own verse quickly on a test site, and it seems to be behaving as intended, in that it does not add any line breaks it shouldn’t, instead you are required to scroll sideways because it maintains the verses natural line endings.

    Thread Starter hannahhuff2018

    (@hannahhuff2018)

    7 years, 8 months ago

    Hi Marius,

    Yes, I ended up changing it because the verse block was so confusing for readers. Here are screenshots of the verse block issue prior to the change (sorry they are so small):

    https://notesofoak.com/wp-content/uploads/2018/11/desktop.png
    https://notesofoak.com/wp-content/uploads/2018/11/mobile.png

    The bottom verse block in each picture best shows the issue. On the desktop screenshot, you can see that there’s a line break after crow/, and the next line of text starts on the next line.

    However, on the mobile version, you can see that with that same text, there are no line breaks whatsoever. Nothing happens after crow/ — the line just runs into the next line, with no physical break on the page. If I didn’t have the visible “/”, the mobile reader would have no idea that there’s supposed to be a line break there. Instead, they just see a single line of text that they have to scroll sideways to read.

    The problem is that the mobile version is not actually maintaining the verse’s natural line endings that I inserted — it doesn’t maintain ANY verse line endings. The verse block becomes a single line unformatted verse on mobile.

    Thanks,
    Hannah

    Moderator Marius L. J.

    (@clorith)

    7 years, 8 months ago

    Thank you for the screenshots, and explanation, could I ask what browser you are using (and version of it) in those screenshots?

    For reference, this is what the verse block shows for me, which is why I’d like to dig a bit deeper and see if we can find the root cause
    https://www.dropbox.com/s/jeg19rbm3d9g2nt/Screenshot_20181116-030331_Chrome.jpg?dl=0

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Verse Block Doesn’t Maintain Formatting on Mobile’ is closed to new replies.

Tags