Next.js Discord

Discord Forum

content out of screen in mobile but fits to screensize in computer

Answered
Holland Lop posted this in #help-forum
Open in Discord
Holland LopOP
im facing this problem where on desktop the ui is fit to screen but on phone this specific thing happens
and im not sure whats causing it but maybe someone here can

app/foo/bar/page.js
    <div className="flex flex-1 flex-col gap-2">
      {e.length === 0 ? (
        <div className="flex flex-1 items-center justify-center text-gray-400">
          <p>nothing found</p>
        </div>
      ) : (
        <div className="flex-1 overflow-y-auto">
        something
        </div>
      )}
    </div>


app/foo/layout.js
    <div className="flex flex-row min-h-screen">
      <Component />
      <div className="flex-1 flex flex-col h-screen overflow-y-auto">
        {children}
      </div>
    </div>


app/layout.js

    <html lang="en">
      <body
        className={`${font.className} antialiased flex flex-col min-h-screen`}
      >
        <Main>{children}</Main>
      </body>
    </html>

Main.js
export default function Main({ children }) {
  return <main className="flex-1 w-full h-full flex flex-col">{children}</main>;
}



any suggestion is appreciated, thanks
Answered by joulev
Instead of h-screen (vh) you should use the dvh unit instead. IIRC in tailwind it is h-dvh
View full answer

6 Replies

Chub mackerel
Try removing h-screen from the inner div in your layout, that fixed it for me when I had the same prob
joulev
Instead of h-screen (vh) you should use the dvh unit instead. IIRC in tailwind it is h-dvh
Answer
Pacific sand lance
use svh/dvh instead of vh, should fix the issue
Holland LopOP
perfect, thanks a lot guys
you are the best