# Responsive Design help? **URL:** \ **Category:** I Built This\ **Created:** [September 28, 2016, 4:52pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954 "2016-09-28T16:52:26Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![s\_coder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s_coder/32/26587_2.png) [@s\_coder](https://forum.freecodecamp.org/u/s_coder)\ **Post date:** [September 28, 2016, 4:52pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/1 "2016-09-28T16:52:26Z")
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** ![](https://global.discourse-cdn.com/freecodecamp/original/3X/f/d/fdafe1307d93aa0192d65f6993090261efa99fdd.jpg) **Normal Desktop Page Layout**![](https://global.discourse-cdn.com/freecodecamp/original/3X/8/7/87f8c1f7f0c2c5a051c29a6d82d2181b17e3b895.jpg) ---
**Author:** ![eliotn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/eliotn/32/11307_2.png) [@eliotn](https://forum.freecodecamp.org/u/eliotn)\ **Post date:** [September 28, 2016, 6:08pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/2 "2016-09-28T18:08:30Z")
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? ---
**Author:** ![s\_coder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s_coder/32/26587_2.png) [@s\_coder](https://forum.freecodecamp.org/u/s_coder)\ **Post date:** [September 28, 2016, 7:19pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/3 "2016-09-28T19:19:23Z")
Hi @eliotn, Thanks for responding. You can view my project on gitthub pages here: [JavaScript Calculator Project](https://saracarlile.github.io/JavaScript-Calculator/) I am working on the layout right now, so just a basic design is there. ---
**Author:** ![KoniKodes](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/konikodes/32/158615_2.png) [@KoniKodes](https://forum.freecodecamp.org/u/KoniKodes)\ **Post date:** [September 28, 2016, 8:30pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/4 "2016-09-28T20:30:43Z")
Did you build your calculator to be a specific size (px)? ---
**Author:** ![s\_coder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s_coder/32/26587_2.png) [@s\_coder](https://forum.freecodecamp.org/u/s_coder)\ **Post date:** [September 28, 2016, 8:38pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/5 "2016-09-28T20:38:10Z")
@KoniKodes, thanks for the response. Yes, it has a width of 600px and a height of 400px. ---
**Author:** ![KoniKodes](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/konikodes/32/158615_2.png) [@KoniKodes](https://forum.freecodecamp.org/u/KoniKodes)\ **Post date:** [September 28, 2016, 8:55pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/6 "2016-09-28T20:55:35Z")
Yes. So if your viewport is 320 then you would have a size issue. ---
**Author:** ![s\_coder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s_coder/32/26587_2.png) [@s\_coder](https://forum.freecodecamp.org/u/s_coder)\ **Post date:** [September 28, 2016, 8:59pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/7 "2016-09-28T20:59:57Z")
@KoniKodes That makes sense. Thank you very much for responding. ---
**Author:** ![KoniKodes](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/konikodes/32/158615_2.png) [@KoniKodes](https://forum.freecodecamp.org/u/KoniKodes)\ **Post date:** [September 28, 2016, 9:00pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/8 "2016-09-28T21:00:31Z")
🙂 Sure, Happy Coding ---
**Author:** ![s\_coder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s_coder/32/26587_2.png) [@s\_coder](https://forum.freecodecamp.org/u/s_coder)\ **Post date:** [September 28, 2016, 9:21pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/9 "2016-09-28T21:21:55Z")
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. ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [June 1, 2021, 6:06pm UTC](https://forum.freecodecamp.org/t/responsive-design-help/40954/10 "2021-06-01T18:06:24Z")