To give a simplified explanation: designing for mobile is weird because 1 pixel on the device screen might not be equal to 1 pixel in the CSS.

For instance, here I have Subeta's "mobile" layout open in an iPhone 6 emulator:

You can see that the size of the screen here is 667 x 375. (It's written at the top.) However, if I inspect the webpage to find the size of the elements on the page:

Ignore the height - it's large because the page scrolls - but note that the width is 1000px, rather than the 667px you'd expect. That's the width of that element. That's how wide the webpage thinks the screen is, and all of the calculations done on that webpage use that size.

So basically, the webpage might know if you're on a phone or a computer, but it doesn't know the actual size of whatever screen you're on. In this case, the webpage can't make accurate calculations to make it look nice on mobile, because it doesn't know that the device is actually 667 x 375.

To get around this, you need to have a specific line of code that gets the actual size of the screen/device for your CSS to work with. Otherwise, the website will be rendered essentially the same on mobile and desktop devices - which is what's happening on Subeta right now, because Subeta's current layout is missing this line. I've tried to simply add it in, but adding it actually causes more things to break since so much of the site was coded without it.