0
  1. A div class called "menu" is the navigation bar that stays fixed to the top of the page.
  2. A div class called "scrollable content" displays correctly below the menu on a desktop and scrolls underneath menu when scrolling.
  3. On mobile, the content begins hidden underneath menu and on safari if you select "hide toolbar" the content adjusts back to normal.
  4. On chrome on mobile, it's doing the same thing but there is no toolbar option to hide.

What is causing the content to move on mobile devices?

.menu {
  width: 100%;
  height: auto;
  background: #C42222;
  position: fixed;
  z-index: 1;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}

.menu_icon {
  font-size: 4vh;
  color: white;
  padding: 5px;
}

.menu_icon_right {
  font-size: 4vh;
  color: white;
  padding: 5px;
  float: right;
}

.scrollableContent {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 95vh;
  overflow-y: scroll;
  /* overflow-y: overlay;*/
}
<div class="menu">
  <a href="book"><i class="material-icons menu_icon">auto_stories</i></a>
  <a href="home"><i class="material-icons menu_icon_right">account_circle</i></a>
  <a href="social"><i class="material-icons menu_icon_right">people</i></a>
</div>
<div class="scrollableContent">
  <form>
  </form>
</div>

MobileView

disinfor
  • 10,865
  • 2
  • 33
  • 44
adamcapjones
  • 185
  • 1
  • 17
  • try use [media queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) look [there](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) too – Matt Nov 16 '22 at 16:06

1 Answers1

0

Mobile doesn't like height: 95vh; Changed to 95%; Working normally now.

adamcapjones
  • 185
  • 1
  • 17