Q:

Mobile layout not adjusted to screen size

I have created a website and developed the frontend to be resposnisve with the help of the Firfox Developer Tools (to test on different screen sizes). Now that I have deployed my web app, I am facing a problem.
On mobile devices, the layout is not as it was on the developer tools, with the same screen size. The page is having a resolution of 1920px x 1080px and is just zoomed in (see image)

I have use this tag, but it doesn't seem to fix the problem.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

I have made all of my css responsive and the problem comes only, that the page on the mobile layout is not the same size as the device. So i would like to know, how can I adjust my page, to be the same size as the device?
Here is a JsFiddle with the base layout of my website 
Here is the JsFiddle with the actual content of the website
The website is available under: https://piaweirather.de/, test it on desktop and on mobile and you will see what i mean.
Any help would be greatly appreciated, and if you need any more infos, please don't hesitate to ask me.

A:

After hours of searching, I have found the problem.
It seems as overflow: hidden; and  position: absolute; don't go well together.  
After removing this part in my CSS file, the problem dissapeared:
.navigation {
    position: absolute;
}

If you need the functionality of position: absolute, I would recommend using position: fixed instead.
tldr: Don't combine overflow: hidden and position: absolute, if you want to target the mobile market.

