Paragraphing on mobile is messed up

  • Unknown's avatar
    wydsat · Member ·

    Hello,

    I am currently using the Lodestar theme and I have a page (courses & classes) which is having some problems.
    The problem is when the blog is viewed on computer, everything (paragraphing and alignment) is great but when I view it with mobile, everything is messed up. It feels like the phone screen width is too short to fit the length of the paragraph when typing on the computer.

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

  • Unknown's avatar
    justjennifer · Member ·

    Hello there, is there a particular page this occurs on? If so, please give a direct link so we can take a look.

  • Unknown's avatar
    uxcitizen · Member ·

    Hello,

    I’m seeing the behavior you’re describing on this page as an example.

    What I think is happening is that you’re using hard-coded spaces to create rows and columns – a table. Your HTML and your theme doesn’t know that data is supposed to be displaying in a table, and so on a smaller screen, it does indeed mess up the alignment on mobile, because tries to wrap the content as it would a regular paragraph of text.


    Creating tables in your text editor     requires you to be a little more hands-on with your site’s HTML, but it can be done. To do this, make sure you’re using the HTML editor, not the visual editor.

    Then you might format one of your tables like this (I grabbed the data from the page I linked above so you can try copying and pasting it.)

    <table>
<tr>
<td>Classes</td>
<td>Time</td>
<td>Fees</td>
</tr>
<tr>
<td>Grade 8</td>
<td>SUN 1700 – 1830</td>
<td>$40</td>
</tr>
<td>Grade 9</td>
<td>SUN 1530 – 1700</td>
<td>$40</td>
</tr>
<tr>
<td>Grade 10</td>
<td>SAT 15:15 – 1700</td>
<td>$45</td>
</tr>
<tr>
<td>Grade 12</td>
<td>SAT 13:00 – 15:00</td>
<td>$50</td>
</tr>
</table>

    It may not look exactly perfect on mobile depending on your theme and font size, but then your HTML will make a good effort to keep your data in the tables as you set up.

    Here’s more information about HTML tables.

    Good luck with your site and check back here if you have further questions!

  • The topic ‘Paragraphing on mobile is messed up’ is closed to new replies.