4

Login-Screen on narrow Desktop-Browser:
Login-Screen on narrow Desktop-Browser


Login-Screen on mobile Device:

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.

Xaver 115
  • 76
  • 5
  • do you mind posting your code for that element? – pann Oct 08 '21 at 08:41
  • 1
    Check your meta tags – Ricardo Silva Oct 08 '21 at 08:43
  • 1
    look at : https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page & https://stackoverflow.com/questions/7859336/why-are-my-css3-media-queries-not-working-on-mobile-devices if that helps you understand what happens. – G-Cyrillus Oct 08 '21 at 08:44

3 Answers3

5

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">
Furious Mountain
  • 1,323
  • 3
  • 16
  • 44
1

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. The second icon from the left

Aditya kumar
  • 88
  • 9
1

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

fub32
  • 23
  • 5