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