Table text align in mobile phone

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!

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!

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!