Page not scaling to fit the viewport on mobile

Question

My page is not scaling to fit the viewport of mobile device even though I have put the meta tag:

 <meta name="viewport" content="width=device- 
    width, initial-scale=1"> in the <head>.

When the page loads, the page is too large and does not fit the screen.
css for body is

body, html {
position: relative; 
display: block;
height: auto; 
width: 100%;
max-width: 1650px;
min-width: 400px; 
min-height: 650px;
margin-left: auto;
margin-right: auto;
}

I would appreciate any help. Thanks!

`min-width: 400px; ` could be the issue. remove it and test. — Prajwal, Jan 26 '19 at 18:53

score 1 · Answer 1 · answered Jan 26 '19 at 22:32

1

Try a media query with max-width: 100% and min-width: 100% property like this:

@media (max-width: 768px) {
  body,html {
   max-width: 100%;
   min-width: 100%;
 }
}

answered Jan 26 '19 at 22:32

Αntonis Papadakis

1,210
1
12
22

Thanks for the suggestion. I will give it a try! – Reena Olaniyi Jan 28 '19 at 15:12

Page not scaling to fit the viewport on mobile

1 Answers1