Responsive Design help?

Responsive Design help?
0

#1

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


Normal Desktop Page Layout

How to prevent overflow in responsive design?
#2

Hello s_coder,

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?


#3

Hi @eliotn,
Thanks for responding.
You can view my project on gitthub pages here:
JavaScript Calculator Project

I am working on the layout right now, so just a basic design is there.


#4

Did you build your calculator to be a specific size (px)?


#5

@KoniKodes, thanks for the response.
Yes, it has a width of 600px and a height of 400px.


#6

Yes. So if your viewport is 320 then you would have a size issue.


#7

@KoniKodes That makes sense. Thank you very much for responding.


#8

:slight_smile: Sure,
Happy Coding


#9

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.