My calculator —> https://codepen.io/Mike-was-here123/pen/QrdJdO
On mobile —> https://s7.postimg.cc/6i062u4cr/FBCEAF9_F-6_A2_B-4389-_B76_E-008_E53_DC79_F3.png
Why are the buttons being moved around on Mobile? The buttons in question are on line 60 of the html, and when I resize on desktop they done move. I also see how if you press PT, the text is cut off also.
It’s a simple set up of just rows in rows in rows. I even placed comments to lead you.
I haven’t looked too closely into it but I strongly suspect it’s because the browser you are using on your mobile device doesn’t support CSS Grid (it happened to me not too long ago).
I don’t know nearly enough about mobile testing, but you could try testing your mobile browser with a separate Pen with something like the following snippet:
if (window.CSS && window.CSS.supports && window.CSS.supports('display', 'grid')) {
document.body.style.background = 'royalBlue';
}
else if (window.CSS && window.CSS.supports) {
document.body.style.background = '#1CE';
}
else {
document.body.style.background = 'crimson';
}
The additional conditions are just there to check if the browser supports the window.CSS.support() method.
I hope that helps! 
It turns blue, and judging by the code, means it supports Grid?
I am on a mobile school iPad in which everything is blocked but YouTube, so…
If it turns blue then I’ve probably made a wrong assumptions! It may just be as simple as the grid is somehow expanding more than its container with the beige background. 
I’ll try it on my tablets and phones when I get a chance and get back to you!
EDIT: @JohnBackUp—I think I have found what the issue is (I was indeed making weird assumptions).
It looks like multiple layout problems is causing this and the reason that some of the buttons are pushed outside the calculate area is most likely because the calculator has a fixed height and width, and a combination of factors such as fixed margin/padding around elements, difference in default font size, difference in viewport sizes… etc.
To begin with, there are issues with how you defined the grid:
.grid {
display: grid;
display-template-columns: 200px 1fr 200px;
grid-template-areas: ". cal .";
}
display-template-columns isn’t a CSS property and you probably meant to type grid-template-columns. If you want things to be responsive, then I think it’s better to do this instead (not tested):
.grid {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas:
". . ."
". cal ." /* Calculator in the middle */
"c c c " /* Copyright notice */
}
Then remove all margins around the calculator and add grid-area: cal to its CSS and the calculator, and add grid-area: c; to .copyrite, and you should get a somewhat responsive version of the layout that (I think) you want.
So that button text doesn’t get pushed to the right on mobile devices with smaller viewports, you should also add padding: 0 to the .num class. As for the buttons that get pushed outside of the calculator area, you could either make the calculator’s width responsive and adjusts its with according to the button rows; get rid of some text so that they’re about the same as the other rows; use CSS grid on the rows, apply 100% width the buttons and use grid-gap to space them out; use flex box magic, maybe a combination of flex-grow and flex-basis (sowieee, this is a bit hand-wavey). So… bottom line, there are options!
I personally would make the calculate area responsive, too, because it would not fit on devices with a viewport size of something like the iPhone 5, but this is more for future reference—if you plan to make things work on mobile devices, a mobile-first approach will save you a lot of time spent on (effectively) redesigning the whole thing.
I hope that helps!
Appears to be working on my phone, Thanks :D.
Does it work on yours? If i try it on my school iPad, it does the same thing. I feel as if this is because mostly everything external is blocked, but i’m not sure.
Should i just redesign my button rows with CSS gird?
?
The calculator is now centered on my phone, the only thing is that I think my phone’s viewport size is smaller than yours, so some of the buttons still get pushed outside.
Take the second last row of buttons for example—there are 18 characters (GEOM., PT, Prime Number), the suggestion was abbreviate some of them (for example, P. Num.) so that things would fit. Even on my laptop the row is still slightly longer than the others. In hindsight, that’s a hacky, inelegant suggestion, so please ignore that.
I think CSS gird would work well; the only problem that I think you will run into is that columns are of fixed size, so you will likely want to plan ahead and decide how much space you want for each button and use grid-row: m / n span (where m and n are integers) to get the desired layout.
Alternatively, you could also try rows of flex boxes, which gives you a bit more freedom in terms of button width, I haven’t really thought too carefully about this though and I think there are potential caveats or it may turn out to be a lot more trouble than CSS grid in terms of getting consistent spacing between buttons (CSS grid has grid-gap).
Good luck!