Why does my CSS look different on a mobile device than it does on my narrow desktop browser and how do I change it? [duplicate]

Question

Login-Screen on narrow Desktop-Browser:

Login-Screen on mobile Device:

Both sides have the same width and height and the exact same CSS-Code.
Why does it look different and how can I change it?

If i try using

@media screen and (max-width: 520px){ ... }

to change the width of the div it looks better on mobile but different and worse on Desktop.

Answer 1

This is a very useful tag you can put in your head tag. Which is probably your issue

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

Answer 2

Don't use narrowing the desktop size for viewing your website in the mobile
Instead use the the mobile icon on the chrome developer tool in order to view what will appear on what screen size and accordingly use media query in CSS so that you can get what appearance you want on mobile.