[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

I downloaded the latest version and see that it now uses a class called “osm-responsive-table.” However, this class doesn't load any CSS, and the `overflow-x` property is missing. The `overflow` property needs to be applied to `#my-subscriptions-page` so that the table becomes scrollable.

But it’s good to hear that you’re working on the CSS Grid version. This is a huge step toward a responsive design and should replace not only all Membership Pro tables but also the Evventsbooking tables.

Hi

The css was added. I guess it is not being applied because the css file is cached by browser. Please clear browser cache and you should see it

Will update you when the css grid version is implemented

Regards,

Tuan