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

428 views Asked by At

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

3

There are 3 answers

0
NickG On BEST ANSWER

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>
0
Samculo On

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">
0
AudioBubble On

Add this HTML Viewport to you <head>

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