Scaling a widget on phone and devices

What layout would be appropriate on mobile? It’s difficult if not impossible to make tables behave responsively. Either the cell relations get scrambled or the content becomes so small as to be unreadable.

Hello and thanks for your answer.
Well a calculator such as this one https://bazibz.masteryacademy.com/Default.aspx gives the chart and tables scaled down exactly to the phone screen size, on which one can then zoom in. This is what I would try to implement…You would however need to register (for free) to try it and see what I mean, if that’s ok.

This one too, without registration
https://www.bazi-calculator.com

Part of the solution is appropriately setting the viewport meta tag for the page.
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

The bazi-calculator doesn’t even have one, which is why I think it works. I don’t think removing the tag is the right solution though.

The rest of the solution is ensuring all containing elements have a relative CSS width setting like 100%. Any absolute widths like 1000px will cause it to overflow instead of zoom.

Thank you for your answers. It’s a bit too techy for me, so if you could bear with me a little bit more I would appreciate. The guy being unprofessional I will keep the other calculator that I am renting, which is on this page.
https://www.fengshuienfrance.fr/calculateur-bazi
Same problem however on phones and they say it’s API and would charge quite a sum to have it fit on different screens, so I would prefer to do it myself if I can implement such coding. But I’m not sure if they are saying this to overcharge basically…The thing is, I need one of those calculator to eventually work on my site on phones.
When I look at the page source I get this
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
Is there some css lines I can add to rewrite this, and how, for it to work?

The viewport meta tag implementaion is theme dependent. It’s often hardcoded right on the header.php template, but YMMV. If you do alter this tag, it’ll likely be applied to every page on your site. It should be possible to do a conditional statement along the lines of (pseudocode):

if ( calculator_requested() && is_mobile()) output zoomed viewport tag;
  else output default viewport tag;

You can usually place overriding CSS in the Additional CSS section of the customizer. To cause such CSS to only be applied to the one page, include .page-id-1842 (one of the body classes) as the initial selector.

The calculator is nested within quite a few HTML div containers. If you have trouble getting it all to work as desired, it might be worth using a greatly simplified custom page template. You could start with a copy of the default page.php template and remove most of the extraneous stuff besides the themed header and footer. Name the new file page-1842.php (or whatever its actual ID is). If necessary, you could even replicate the HTML and CSS from an existing calculator version that works the way you want, omitting the viewport tag if that’s what it takes.

Before you get too involved with this, are you sure it’s the best user experience having the initial view be the entire thing shrunken onto a tiny phone screen? Users will surely have to spread zoom in order to use it, forcing them to need to eventually side scroll anyway. IMO it’d be easier to have it be at a usable scale to start with. Yes, I’d have to side scroll to see the rest of it, but I’d end up in that situation anyway if it all initially fit on my screen. I do see the advantage of initially seeing the entire thing, I’m just not convinced it gains us that much. Just sayin’. Do what you think is best.

Thanks a lot for your help! I finally went for another solution that scales fairly well and didn’t have to do anything myself. But always very grateful for the support of the community and for having learned something.