How can I hide navbar and footer on a page while having full content in every window screen width?

[EllyFodorDesign]

with my page inside hiddenpath, the screens width is limited to ca 1200px. Tried to remove 90% limit on components, did not change it.
Layout.tsx
Hometest.tsx
styled-components.tsx
[FooterLanding.tsx](https://github.com/user-attachments/files/22
[Navbar.tsx](https://github.com/user-attachments/files/
App.tsx
22928413/Navbar.tsx)
928410/FooterLanding.tsx)

[milajovanovska]

Hi @EllyFodorDesign !

To achieve a full-width layout without the Navbar and Footer on a specific page, you have two main approaches. Since you are using a Layout.tsx wrapper, the cleanest way is to use Conditional Rendering based on the current route.

If your screen is limited to 1200px, it’s likely that a parent container has a max-width or padding. You can override this in your styled-components:

const FullScreenContainer = styled.div`
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 100vh;
  background: white; /* or your preferred color */
`;

Tip: Make sure that in your App.tsx or global styles, there isn't a wrapper div constraining the width of the entire application.

Hope this helps! Let me know if you need more details

[SanketPathare]

If you're using React or Next.js, you can conditionally hide the navbar and footer on a specific page by checking the current route. To make the page content use the full available screen width, remove the layout's max-width and unnecessary horizontal padding on that page.

For example, in Next.js App Router, you can create a separate layout for pages that should not include the navbar or footer. This is usually cleaner than hiding them with CSS.

If you want to keep the same layout and conditionally hide these components, you can check the pathname using usePathname() from next/navigation and render the navbar and footer only on routes that need them.

Also, use responsive CSS such as width: 100% and max-width: none where appropriate. If you need the page to fill the entire viewport, consider min-height: 100vh.

The best solution depends on whether you're using Next.js App Router, Pages Router, or plain React. Which setup are you using?