Display problems on mobile

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

9/15/2023 6:08:44 AM
Gravatar
Total Posts 66

Display problems on mobile

On one of my sites users have complained that when they view certain pages on mobile phone they cannot scroll some pages horizontally to show text that is to the right of the display window, though if I rotate the screen to landscape I can scroll and zoom without problem.  I am using an Android phone.

An example can be seen here:  Pre Christmas - Ormskirk Quiz League

The skin is based on artisteer31-bluenwhite and has been tweaked in Artisteer.

Any idea why?

9/18/2023 11:48:34 AM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Display problems on mobile

Hi Chris,

In the case of that particular page the issue is just that the page content is all in a table. The table will not compress naturally.

This CSS will fix it so that all of the table content is visible on a phone:

.art-article table, table.art-article { max-width: 100%; }

Unfortunately that solution can result in table content looking "squished" sometimes (it really depends on the content). If you just want the user to be able to scroll, you can add this CSS instead:

.table-wrap { overflow-x: auto; max-width: 100%; }

And then in your HTML, wrap your table with a div with the class "table-wrap", like this:

<div class="table-wrap">
     <table>
          ...
     </table>
</div>

Hope this helps!