Table text align in mobile phone

  • Resolved rozard

    (@rozard)


    4 years, 8 months ago

    Hi,
    I have created a poetry page in my WordPress website. Since poems have short lines so I created a table with two columns so that I can write two poetry in one page. Everything looks fine in desktop but when user view the page in mobile phone width of columns get very small and text get congested. It’s hard for user to read it properly. Is there any way that make columns up and down in mobile view? or is other way to write text not get congested or any plugin. I really appreciate the help. Including the webpage link.

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

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

  • Hi @rozard,

    In general HTML tables are not responsive (i.e., they don’t play nice on small devices) As you can see.

    Yes, there is a way to stack your columns on mobile. But, since you are using a table, it requires a bit of custom CSS.

    For example, the code in this article actually works on your page. There are a couple of side-effects because you have extra whitespace in your columns and the stacking will be reversed (not RTL friendly).

    https://css-tricks.com/responsive-data-tables/

    I see that you are using a theme called Newspress Lite. Please refer to the theme’s documentation and support channels to see what your options are.

    If it were me, I would create a parent div tag with two children div tags and then style them using flex and block with a media query.

    See my example on CodePen.

    Good luck!

    Thread Starter rozard

    (@rozard)

    It’s bit complicated. I just don’t want to break something. I thought there might be easy way to do it.

    Hi @rozard,

    Agreed. Web dev can get complicated.

    You never said what pagebuilder you’re using. If you are using Gutenberg, try using its columns block.

    Read more here

    https://wptavern.com/coblocks-adds-row-and-columns-page-building-blocks-for-gutenberg

    Or, hire a web developer. ??

    Good luck!

    Thread Starter rozard

    (@rozard)

    I’m using the default editor which come with WordPress.

    That would be Gutenberg aka the block editor. Great. I gave you a link to the how-to above.

    Please consider closing this thread, if you have nothing further to add here.

    Thanks!

    Thread Starter rozard

    (@rozard)

    Thank you so much the column blocks work.

    • This reply was modified 4 years, 8 months ago by rozard.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Table text align in mobile phone’ is closed to new replies.