CODEWITHSUNDEEP
htmlcsspositioncss-position
Samson Liu
Samson Liu

Reputation: 550

position: fixed doesn't work on chrome/firefox mobile mockup (and mobile), but works when I resize window

This issue is on both Chrome and Firefox

I have a mobile-only sidebar that shouldn't scroll with the page. It's basically like:

body{
  font-size: 16px;
  width: 100vw;
  height: 200vh;
  background-color: orange;
}

.sideBar{
  height: 100vh;
  position: fixed;
  background-color: blue;
  left: 0;
  top: 0;
  width: 10rem;
}
/* media query for desktop. change the min-width */
@media screen and (min-width: 450px){
  .sideBar{
    position: static;
    height: 20vh;
  }
}
<!DOCTYPE html>
<html>
<head></head>
<body>
  <div class="sideBar">
    Hello
  </div>
</body>

</html>

It works as expected when I resize the window to a narrow size. The side bar doesn't scroll with the page. But when I click on the mobile mockup button, the position: fixed doesn't work any more.

I deployed and checked on my phone, and the sidebar scrolls with my phone. So it's not just a browser mock-up problem.


Problem Walkthrough:
  1. Resizing broswer. position: fixed still works. Notice how the logo on top is cropped which means I scrolled down. I can actually make the width really narrow and scroll pretty far without scrolling the sidebar.

resize window. notice the cropped logo, which means I already scrolled

  1. After clicking on the mock up window

mobile mockup button

  1. position: fixed doesn't work any more and the sidebar scrolls with the page.

enter image description here

Upvotes: 4

Views: 3083

Answers (3)

Samson Liu
Samson Liu

Reputation: 550

This is kind of late but I solved it a while back adding this line to the <head> of the html document

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

seems the minimum-scale-1 is the crucial part.

Upvotes: 14

Armand
Armand

Reputation: 410

The problem, if I understood the explanation correctly, seems to come from width: 100vw on body. Does removing it fix the problem?

Upvotes: 0

Rachit Vohera
Rachit Vohera

Reputation: 745

just remove media query css it will work

Upvotes: -2

Related Questions