Problem in adjusting website to mobile (Devtools vs real)

Question

I've implemented Media CSS in my website and when I resize it in Chrome-Devtools it adjusts fine. But when I try it on mobile it shows like in a full desktop page.

Here's my website: dinf

when resizing the page in Devtools:

When simulating mobile

Can you please explain how can that be?

Answer 1

Just add the following line to the head tag of your page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It allows elements and fonts to correctly scale on mobile devices. I suggest you to read this article about it.