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

user_18666102 0
Viewed 94

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

html-templates responsive css
3 Answers

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

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

Add this HTML Viewport to you <head>

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