Lines of text overlapping / not reformatting on mobile

  • Unknown's avatar
    candacea330394ed7 · Member ·

    Hello! When I look at the mobile version of my site the text is overlapping rather than resizing to mobile. Is there a way to have it auto-resize on mobile?

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

  • Unknown's avatar
    aisajib · Member ·

    Hi there!

    I just checked your site and didn’t see any overlapping on the homepage when viewed on a mobile device. Do you see this issue on the homepage or another page on your site? Also, can you share a screenshot so that we can see what you’re seeing? Here’s how to take a screenshot:

    WP
    Making a Screenshot
    in WordPress.com Support
    3 min read
    A screenshot is an image that captures what appears on your computer screen. Screenshots can come in handy when trying to explain something to Support, or if you want to blog about something you’ve seen on your computer screen. No matter what operating system you use, you can make a screenshot in a few steps. Windows Find the Print Screen key. (Depending on your keyboard, the key mi

    You can upload the screenshot when replying here.

    We’ll be happy to look into it further once we have the screenshot.

    Did you know your plan gives you access to live chat support on weekdays? Feel free to chat with us if you’d like.

    Thanks!

  • Unknown's avatar
    candacea330394ed7 · Member ·

    Hi! Attaching a screenshot below. Here are a couple of examples from the homepage. Both the titles and the copy below will split mid-word. Does this help?

  • staff-totoro · Staff ·

    Thanks for clarifying.

    I’ve noticed that the issue appears to be a combination of setting large text size for headings, but containing that text within narrow content columns. The problem with this approach is that when the design tries to refactor itself to work on mobile the large text simply does not have the room to stay on one line together.

    It would be possible (through the help of a designer) to be able to set the theme so it will display the font at one size on desktop view, and a smaller on mobile views, but the drag and drop tools do not have the ability to handle such nuanced settings.

    Instead I would recommend with trying the following:

    • Experiment with heading font size: Are you able to make them smaller while still conveying the same impact?
    • Experiment with the sizing of your columns: Are you able to make them wider and still arrive at a look you are happy with on desktop?

    If you do either of these it will help to allow your layout to exist on desktop and mobile well, but it may take a combination of the two (making the headings a bit smaller and the columns a bit wider) to prevent the text wrapping issue on mobile.

    Hope that helps. Please let us know if you have any more questions.

  • The topic ‘Lines of text overlapping / not reformatting on mobile’ is closed to new replies.