Need help? Check out our Support site, then


Lines of text overlapping on mobile version

  1. I have one line of text overlapping itself in a post when I access it on my iPhone. The post is of a poem, and I have heard poems can be difficult to format on WordPress. I have looked on other forums and tried different codes and whatnot, but I have very limited knowledge of coding, just what I learned formatting lines in this post.

    Ideally, I would want all lines of text to be in the same position on the mobile version as on the desktop version, for the whole blog. If that isn't possible, I did read somewhere that you can make the mobile version of the blog look just like the desktop version.

    The site I am having trouble with is http://aiguillemedia.com, and I am using the Motif theme.

    The blog I need help with is aiguillemedia.com.

  2. rachelsquirrel
    Staff

    You can disable the mobile theme from Dashboard -> Appearance -> Mobile. There's an option to Enable mobile theme and you can select Yes or No.

  3. It appears that it was already checked "No." Even when I continue to press "Update" it doesn't change.

    Above where it says "Enable mobile theme" it says "Awesome! Your theme, Motif, is already deemed to be mobile-friendly." Does that mean I can't choose to make it not mobile?

  4. rachelsquirrel
    Staff

    Ok, I've tried it out on my phone and I've found a couple of issues. Firstly, you've got a div setting the line height to .2em. You'll have to remove this. Did you set that from the custom design?

    The other issue is you've got a p tag setting the left-margin to 30px but what you really want is just to indent the first line of text, since you don't know where exactly the line will wrap on every single device. You can do this by using text-indent in place of margin-left.

    <p style="text-indent:30px;">

  5. Thanks. Yeah, I set all that in the post's text editor.

    But what I was hoping was that the lines wouldn't wrap at all, like on the desktop version. Because Motif is a responsive theme, couldn't I make changes in Custom CSS to potentially make the mobile version the same as the desktop version? Or if I really had to I guess I could switch themes to something where I could actually disable the mobile theme.

  6. rachelsquirrel
    Staff

    Hi Aiguillemedia,

    I'm not sure that I understand what you want. The text will wrap to fit the screen. If it didn't wrap, the user would not be able to read the whole line without scrolling and this would be frustrating for them. If you look at your site in a web browser and then resize the browser to be narrower and narrower, the same thing happens: the text will wrap to fit the screen.

  7. I understand that the text will wrap, and that's fine if someone wants to zoom in and read it that way. But what I find frustrating is that I can't zoom out from the mobile version because anyone viewing it that way won't be able to see what the intended format for the text is. Regardless of if it's a single line or a whole block of text, I don't like only having four or five giant words in a line and having to scroll down every two seconds. There are many sites that look the same on mobile as they do on desktop, this forum being one of them. So I would want either a zoom-out capability, with the text fitting to the screen and the menu expanding out so the user can automatically see the pages and categories laid out horizontally, or better yet just having it zoomed out in the first place. So either way I would want it would look like the desktop version when it's zoomed out.

    The other thing I noticed was that on some websites (like this forum) the text doesn't wrap, and you can just scroll in all different directions. I would prefer that.

    If any of this involves changing themes, getting the CSS upgrade or switching to wordpress.org, that's fine.

    Again, I appreciate it.

  8. rachelsquirrel
    Staff

    There is a CSS style for nowrap. What you could do is in your p tag with the indent, add "class=nowrap"; so that it would look like this:

    <p style="text-indent:30px;" class="nowrap";>

    Then you can specify in the style sheet (so you would need to upgrade to custom design for this)

    .nowrap {
           white-space:nowrap;
    }

    You may also need to specify the line width that you want.

    I hope this helps.

Topic Closed

This topic has been closed to new replies.

About this Topic