When I go to login page it is in desktop mode (responsive design disappear)-CodePudding

everyone! I am working on a project that is based on this template. Everything is OK on the template except for the login page. The problem there is that when someone opens the site over the phone, the page comes out like on a desktop. I opened the original template's login page from themeforest and saw that it is actually responsive, but not for me. Where can the problem lie? Unfortunately, I can't share a link to my project, as it is for a customer.

To view the login page that I'm using - click on Pages and then Login

CodePudding user response：

Probably you are missing the viewport meta tag in your html head. The viewport meta tag is needed to control the dimensions and scaling of the web page. In your case the display of your login is controlled by media queries, e.g. max-width: 920px. The phones actual resolution is probably higher than that. By adding width=device-width you essentially tell the browser on the phone to scale the page down to the actual screen size, and not use the resolution for the media queries.

It is worth noting that you can add more settings to your viewport meta tag, e.g. to control zoom (you can find more info here).

<html>
  <head>
    <!-- other header stuff -->
    <meta name="viewport" content="width=device-width">
  </head>
  <!-- document body -->
</html>

CodePudding user response：

insert this into head tag

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">

CodePudding user response：

Add this HTML Viewport to you <head>

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