[UX/UI] improve responsive design

Many front-end views still use table based layouts. However, these are not responsive and throw off the entire layout. This makes it very difficult for users to read content and navigate the site. Attached is a screenshot of the profile view, which clearly shows how the layout is disrupted.

 

Yes, I see. Do you have any idea how these table data should be displayed on mobile ?

Tuan

At the very least, you should place the table inside a div container and assign the property "overflow-x: auto" to that container. This will at least allow you to see the contents.
It would be better to use CSS Grid instead of tables. Here is a small sample HTML file.

 

Thanks. The CSS Grid solution looks great. Will look more at it

Regards,

Tuan

For the time being, I updated code of the extension to use table-responsive table class added to have overflow-x: auto as you suggested. You might want to download latest package of the extension and update to your site. The CSS Grid solution will need more time

Regards,

Tuan