Why does my CSS look different on a mobile device than it does on my narrow desktop browser and how-CodePudding

This question already has answers here:

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.

CodePudding user response：

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.

CodePudding user response：

Try using percentage instead of pixels and it should work. One other thing you might consider is using bootstrap login pages.

CodePudding user response：

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">

Page link：https//www.codepudding.com/net/144879.html

Prev:Expand a div according to the amount of textbox

Next:How to make a table two row in one column