How can I arrange horizontally arranged sections, in my web page, as vertically so as to make my page responsive on devices

Question

My Problem:

My web page screen resolution is wider that the mobile screen resolution. I am trying it locally from assets to be shown on WebView.

1. The sections are arranged horizontally in a grid display.
2. Then when I see the same page on phone, the middle sections are collapsed (not shown).
3. There horizontal and vertical scroll views is not visible, when it should.
4. and like it should be: the horizontally arranged sections should arrange vertically to be able to show each section.

I tried to put the HorizontalScrollView and VerticalScrollView and the WebView inside.

I have fixed the resolution for the WebView as 1000dp * 600dp (layout_width and layout_height respectively in my layout xml).

Now I can scroll to all parts of the screen, but the clicks and drag drops are not working on the page (drag drop is managed from the JavaScript inside).

I tried using onInterceptTouchEvent to intercept some events, but I will say it is not recommended to use.

I want to manage the scrolls and clicks entirely from the Web Page rather than using Horizontal Scroll View and Scroll View and setting the heights and widths on the WebView.

Trying to take help from:

1. How to make a page responsive
2. How can I arrange horizontally ...

Answer 1

The link below solves my problem a bit. I can control when I want the above scroll bars to scroll when I need (or by adding a padding dimension inside this scroll-view parent to offer scroll area).

Prevent scroll of parent scroll view when drag event is happening in its child view, or in some other case where you do not want your scroll view parent to scroll.

There is another short way:

scrollView.requestDisallowInterceptTouchEvent(true);

But it offers less control. if you add a padding dimension inside this scroll-view parent to offer scroll area, it serves what I need.