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).
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
Normal Desktop Page Layout
Can you please link to your project or post the source code so that we can examine your code and explain the root cause of your problem?
Thanks for responding.
You can view my project on gitthub pages here:
I am working on the layout right now, so just a basic design is there.
Did you build your calculator to be a specific size (px)?
@KoniKodes, thanks for the response.
Yes, it has a width of 600px and a height of 400px.
Yes. So if your viewport is 320 then you would have a size issue.
@KoniKodes That makes sense. Thank you very much for responding.
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.