Viewport not working when body is set as 1020px

Question

I am trying to make the top border of the nav div to cover the entire screen but it is not working.

body {
  line-height: 1; 
  width: 1020px;
  font-family: 'Droid Sans', sans-serif;
  margin: 0 auto; 
}

.nav {
  margin: 0 auto; 
  border-top: 6px solid #9FCC7F; 
  width: 100vw;
}

<body>
  <div class="nav"></div><!-- Nav --> 
</body>

It is strange that the view port function is not working? Would you mind taking a look?

thanks again.

this is what I am trying to achieve - http://i.imgur.com/pXdXMYr.png @prasad — danish deb, Nov 04 '16 at 10:26
what I am trying to achieve is - trying to set the width to 1020px or 980px and then occasionally use 100vw in some divs to cover the entire screen — danish deb, Nov 04 '16 at 10:26

score 0 · Answer 1 · edited May 23 '17 at 12:19

0

change the width: 100vw to width 100% and it should work

Take a look at this: Difference between Width:100% and width:100vw?

edited May 23 '17 at 12:19

Community

1
1

answered Nov 04 '16 at 07:55

weinde

1,074
3
13
32

score 0 · Answer 2 · answered Nov 04 '16 at 07:56

body {
  line-height: 1;
  font-family: 'Droid Sans', sans-serif;
  margin: 0 auto; 
}

.nav {
  margin: 0 auto; 
  border-top: 6px solid #9FCC7F;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="nav"></div><!-- Nav --> 
</body>

score 0 · Answer 3 · answered Nov 04 '16 at 07:58

It may be because, the body width 1020px you mentioned exceeds the resolution that a device can support,

Check this link : http://www.w3schools.com/css/css_rwd_viewport.asp

So viewport cannot render correctly when the fixed width exceeds maximum resolution of the device

Set the property as

body{
 width:100%; // for full page width
}

else

leave the width, the browser automatically detects it

Rahul · Answer 4 · 2016-11-04T09:44:27.680

0

Removing width:1020px from body solves your problem.

Here's an example https://jsfiddle.net/rahulxdd/wc5c0xk1/

    body {
          width: 100%;
         }

edited Nov 04 '16 at 09:44

answered Nov 04 '16 at 08:05

Rahul

493
6
27

Add more clarification, what is the issue and display it using fiddle. – Divyang Desai Nov 04 '16 at 08:16
i don;t want to remove 1020px – danish deb Nov 04 '16 at 10:28

prasanth · Answer 5 · 2016-11-04T11:05:10.390

I added the code for You : better you apply with width:100% because its will auto adjust with in responsive view port. px are not adapting

1020px only adapting with in desktop mode.switch with mobile,tab mode its not usefull.so only sugges with 100%

And don't forget to add viewport tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> Its a auto adjust with viewport .

See Reference

body {
  width: 100%;
  font-family: 'Droid Sans', sans-serif;
  }

.nav {
  position:absolute;
  left:0;
  top:0;
  margin:0;
  padding:0;
  border-top: 6px solid #9FCC7F; 
  width: 100%;
}

<body>
  <div class="nav"></div><!-- Nav --> 
</body>

Viewport not working when body is set as 1020px

5 Answers5