It will assume 980px because you don’t have the viewport meta tag in place. That’s how devices initially handled the fact that websites were not designed with mobile in mind so they assumed a width of 980px and then scaled that width until it fits the smaller viewport resulting in tiny elements (just like your site). The details are slightly more complex and devices vary in how they accomplish this but the idea holds true for most devices. What always happens though is that everything gets scaled smaller in one way or another.
Here are three links that may help:
https://www.sitepoint.com/community/t/mobile-viewport-orientations-initial-scale-1-0/38495/13
The viewport meta tag was invented as a way of telling devices that they should not scale the site to fit because the author has taken control and will address those problems by making everything fit properly.
Take a look at any mobile site and you will see that they all use the viewport meta tag and this is the one I recommend.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You could possibly build a mobile only version without using it but you’d have to hack everything to fit by making it all larger to start with so that when its scaled down it looks ok! That’s a crazy way of designing as you are simply guessing at what it may look like unless you continually monitor the device.
Lets take an example of your contact page.
This is what it looks like now:
The body text is ok because you have set it to 41px (approx) when seen on the desktop but when seen on the mobile the text is only showing at about 14px because it has been automatically scaled by the device. This is not a good way to design. If you say xxpx then that’s what you want to see on the device as well. You never want to guess.
Look at the form element. They are too small to be any use on mobile yet on the desktop they are perfectly normal. They have been scaled smaller because of the viewport rules I have been mentioning all along.
If you add the viewport meta tag as I instructed then the device will display exactly what you wrote. Of course because you have now enlarged everything massively to get it working it will be much much too big on the device because it will display your body text at 41px.
Now the question is “do you want to keep guessing at every measurement you make or do you want to make it the right size to start with?”
Take a look at any mobile friendly site and they all use the viewport meta tag where responsive design is called for. The benefit of the viewport meta tag is that you can reliably work on the desktop and just narrow your viewport to a small screen mode and you can see more or less what it will look like.
As I asked at the start I still wonder why you are crating a mobile only version anyway? You should be creating a site for all devices and using media queries to accommodate the display at different widths.
That’s another poor design choice and not very accessible as the hamburger should be its own element in the html rather than a background image on a div. Html is about structure and it should be mostly clear from the html alone what the elements you are using will achieve. Obviously you can bend the rules where need be but it would be so much better if the hamburger was its own element rather than just a background to a div much much bigger than itself.
As an aside your dropdown menu that appears when clicked is also a little too small and doesn’t meet the guidelines for clickable links on mobile.
Lastly, I mentioned the importance of magic numbers and not hard coding heights and this is what I see when I scroll down your history page.
As you can see you have a blank screen with just a footer at the bottom. This is clearly broken and not a maintainable method for your pages.
If you are interested in fixing all these issues we can help you move forward and learn how to do it properly or you are free to continue with your own methods as you please.