Position: absolute causes page to zoom out

Question

This might be a fairly obvious answer, but I don't see anything like this online.

Essentially, I have a responsive navbar that works fine on larger devices. The issue here is with mobile layouts. When I switch to mobile, the entire website is zoomed out like this: https://i.imgur.com/uehxqiQ.png . Removing the line right: -200px; fixes this, but I need to move the content off the screen. Is this zoom behavior nextjs specific, and is there a fix? Thanks!

 .navigation-main { display: flex; justify-content: space-between; align-items: center; padding: 2% 6%; background-color: transparent; }.nav-links-main { flex: 1; text-align: right; }.nav-links-main a { text-decoration: none; font-size: 15px; color: #fff; }.nav-links-main ul li { list-style: none; display: inline-block; padding: 8px 12px; position: relative; }.nav-links-main ul li::after { content: ""; width: 0%; height: 2px; background: #f44336; display: block; margin: auto; transition: 0.5s; }.nav-links-main ul li:hover::after { width: 100%; }.bars { width: 25px; color: #fff; cursor: pointer; display: none; } @media (max-width: 822px) { /* make navbar responsive */.nav-links-main ul li { text-align: center; display: block; }.nav-links-main { position: absolute; background: #f44336; min-height: 100vh; width: 200px; top: 0; text-align: left; z-index: 1; right: -200px; }.bars { display: block; } }

 <div className="nav-links-main" id="navLinks"> <ul> <li> <Link href="/"> <a>HOME</a> </Link> </li> <li> <Link href="about"> <a>ABOUT</a> </Link> </li> <li> <Link href="blog"> <a>BLOG</a> </Link> </li> <li> <Link href="contact"> <a>CONTACT</a> </Link> </li> </ul> </div> <a onClick={openMenu}> <FontAwesomeIcon icon={faBars} className="bars" /> </a> </div>

Answer 1

In your _app.js add this code in the head tag and if any meta tag with name viewport is exist then replace it with this -

<meta name="viewport" content="width=device-width" />