I am having a similar issue with the layout of JavaScript Calculator as the Quote Generator I finished recently.
The main div looks too small on a mobile device, and it sits in the top 1/3 of the page in iPhone portrait (for example).
I used media queries to re-do the layout for mobile on my Quote Generator project. I can do this for my JavaScript calculator too, but I am wondering how others handle this problem?
Do you have tips for designing a layout with a main, center div that looks good on a mobile device and a desktop browser?
I tried experimenting with width 75%, but I need to position the buttons in the calculator to sit correctly on the page, and the width 75% didn’t seem to work with that need.
Here are screenshots of my project:
Iphone Portrait Layout
I found adding this to my page was really helpful as well if anyone is curious:
meta name=“viewport” content="width=device-width, initial-scale=1"
Except enclosed in HTML tags in the Head of the document. Designing to something like 320px is a good point too like @KoniKodes mentioned.