Scratchpad: customize display of text on mobile

  • Unknown's avatar
    goforthandprose · Member ·

    Noob here. I’ve searched these forums and Google, but to no avail.

    Viewing my website (Scratchpad Theme) on an iPhone in portrait mode, “poetry” text that should display as one line is broken into two lines. The text looks correct in landscape mode and on the other devices (any mode). Enable mobile theme in Dashboard does not change the homepage. It changes the theme once inside a post, but it’s less attractive to me and lines are still broken in two.

    I’m on the Personal Plan. Can this be solved without custom CSS? I don’t mind upgrading if that’s the only way, but want to exhaust all options before throwing money at the problem.

    Thanks in advance for any help.

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi there,

    Viewing my website (Scratchpad Theme) on an iPhone in portrait mode, “poetry” text that should display as one line is broken into two lines.

    Is it that there’s not enough horizontal space to display the poetry without breaking it into two lines?

    If so you *could* probably make all of your fonts smaller, so they fit, but I don’t know that this would be ideal.

    Even on mobile, depending on the line-length it might be hard to make it all fit with CSS.

    If you’ll send a link to the affected post or page, though, we can take a look.

  • Unknown's avatar
    goforthandprose · Member ·

    Thank you for the kind response. I believe that you are correct about the lack of horizontal space. As you say, smaller fonts would not be ideal. I have included a link below. I would very much appreciate your taking a look.

    https://goforthandprose.com/

  • kokkieh · Staff ·

    I’ve looked at some of your poetry posts in the mobile view, and CSS won’t help. At most we’d be able to gain four or five characters per line by removing the margins, which would not help to fit the content to a single line.

    Have you checked if it perhaps look better if you used the Verse block instead of paragraph blocks for this content?

  • Unknown's avatar
    goforthandprose · Member ·

    Thanks supernovia and kokkieh. Verse block also breaks into two lines on my iPhone, but with the additional problem of splitting words at the break. I have experimented with the 

     HTML tag. Link to directions is below. Unfortunately, on my phone, that HTML also breaks into two lines and splits words.

https://wordpress.com/support/advanced-html/#preformatted-text

Are there other possibilities that I can try?
  • Unknown's avatar
    goforthandprose · Member ·

    Sorry for the formatting. That should read pre HTML tag.

  • staff-blorbo · Staff ·

    Would you please give us a link to post where you try the Verse block? Changing the line breaks may actually be something we can do via CSS. :)

  • Unknown's avatar
    goforthandprose · Member ·

    Thank you macmanx. I’ve made a Verse block version of my latest post. It is at the top of my homepage (link below). Note, there is a horizontal scrollbar when viewing the Verse version on my laptop. It would be nice if that could be eliminated with the possible CSS solution as well. The original Paragraph block version of identical text is the next post down on my homepage.

    https://goforthandprose.com/

  • kokkieh · Staff ·

    Verse block also breaks into two lines on my iPhone, but with the additional problem of splitting words at the break.

    That’s not what I see on my end – viewing the post at https://goforthandprose.com/2020/06/17/leading-zeros-1-verse-block/ on mobile (Chrome on Android) it shows the poem with only the line breaks you added, and a horizontal scrollbar because the lines are wider than my device screen.

    It looks like this issue is specific to the Safari browser – I don’t have an iPhone, but I see the same thing happen in Safari on a Macbook, both on desktop and mobile screen sizes. You would be able to override the line breaks by adding this CSS:

    .wp-block-verse {
  white-space: nowrap;
}

    The horizontal scrolling is necessary here, as it’s the only way you’d be able to read the entire line on smaller screens. But if you just want to hide the scrollbar itself you can use this:

    .wp-block-verse {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.wp-block-verse::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
  • Unknown's avatar
    goforthandprose · Member ·

    Thank you so much, kokkieh. I appreciate the time that you and your colleagues have spent on this. Although I’m not yet on a plan with CSS customization, I will mark this question as resolved due to your excellent suggestions.

  • The topic ‘Scratchpad: customize display of text on mobile’ is closed to new replies.