Gentlemen, this is a nasty situation: there is a website, and it is composed of an adaptive type. The day is clear, the shoals are there over dofig, and this is evident even to me, an absolute noob in these matters, but work is work.

Task: to make the table readable from the phone, and it should be visible all at once. Starting from headlines a la "collections of past seasons" (a very large heading, and those in one table 3) to insanity with explanations of the headings in brackets. They do not want to change the wording. The table is very important to leave in the form in which it is (that is, the option when information is supplied in blocks, such as everything about it, but the block below and everything about the other is not acceptable).

Mobile phones to overflow: scroll somehow do not react at all. The table itself is not compressed, but goes beyond the edges of the display. Exposed min-width: 400px; and overflow: visible for body - on the computer the scroll works, but on the phone, again, it does not, and visible still goes beyond the display. I tried to concoct her div, but in the end they all float away in the mobile version under each other. In general, I have exhausted my superficial knowledge.
Help who, eh?

PS I don’t know what it is called, but how to make it possible to at least drag a page across the screen? Well, the type you lead to the left, and the hidden left side is opened, and the right side is hidden? I do not know how to formulate it even. Or maybe just tell me a list of properties that are generally responsible for it?

Thanks in advance for any information.

    1 answer 1

    Without a code and / or a link to a resource, it’s hard to say something constructive, but I’ll still try to give a recommendation on how to put it in a “more or less” acceptable form:

    1) Play the width of the window in the browser on the desktop and find the "point" where the desktop version becomes the adaptive version (very often it is 640px).

    2) Specify the following line in the header of the site:

    <meta name="viewport" content="width=640" />

    where 640 is this point.

    3) Create in the stylesheet (CSS) such a rule at the very bottom (it is very important not to interrupt later! Important):

     @media (max-width: 640px) { /* css here*/ }

    4) Now you have the opportunity to work only with the “mobile” layout, without “messing up” the usual one. Here and the table can be turned into a block, etc.

    5) If there is no scrolling on mobile phones, then check out html and body should have such styles as:

     position: relative; overflow: visible;

    6) Also on all modern mobile devices, the browser is a webkit, and it has a very useful feature for -webkit-overflow-scrolling: touch; , provided that the block overflow: visible/scroll/auto; .

    • thanks, much cleared up. - Anna Frank