(the whole site is written in react / material UI.)

I have the problem, that neither my navbar nor my content is shown in landscape mode on mobile devices like smartphone or tablet. i’ve tested this only in my browser since the actual version is not published yet.
for example: The <AppBar/> component is shown itself, but not its real content. and the whole page with an image and text to test is not shown too.

i use those media queries to differentiate between sizes of devices and portrait or landscape:

 const theme = useTheme();
    const isPortrait = useMediaQuery("(orientation: portrait)");
    const isLandscape = useMediaQuery("(orientation: landscape)");
    const isMobile = useMediaQuery(theme.breakpoints.down('sm')); // Smartphones only
    const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md')); // Tablets only
    const isDesktop = useMediaQuery(theme.breakpoints.up('lg')); // Desktops only

see the exact code here:
I have a main file to display the navbars and some other files to make the desktop version or the mobile version:

navbarMain:

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import { Box, useMediaQuery, useTheme } from "@mui/material";
import Typography from '@mui/material/Typography';
import NavbarMobile from "./NavbarMobile";
import NavbarDesktop from "./NavbarDesktop";

interface Props {
}

const NavbarMain: React.FC<Props> = () => {
    const theme = useTheme();
    const isPortrait = useMediaQuery("(orientation: portrait)");
    const isLandscape = useMediaQuery("(orientation: landscape)");
    const isMobile = useMediaQuery(theme.breakpoints.down('sm')); // Smartphones only
    const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md')); // Tablets only
    const isDesktop = useMediaQuery(theme.breakpoints.up('lg')); // Desktops only

    return (
        <AppBar position="fixed" sx={{
            height: isLandscape ? "9vw" : "9vh",
            backgroundColor: '#556B2F',
            display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%'
        }}>
                <>
                    {isMobile && isPortrait && (
                        <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%', padding: 0, margin: 0}}>
                            <Typography variant="h4" component="div" sx={{ flexGrow: 1, color: '#FFD700', margin: "2vh" }}>
                                PLACEHOLDER_TITLE
                            </Typography>
                            <Box
                                sx={{
                                    marginLeft: 'auto',
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center",
                                }}
                            >
                                <NavbarMobile />
                            </Box>
                        </Box>
                    )}
                    {isMobile && isLandscape && (
                       
                        <Box sx={{
                            display: 'flex',
                            flexDirection: 'row',
                            alignItems: 'center',
                            width: '100%',
                            padding: 0,
                            margin: 0,
                            backgroundColor: "red",
                            height: "20vh",
                        }}>
                            <Typography variant="h4" component="div" sx={{ flexGrow: 1, color: '#FFD700', margin: "2vh" }}>
                                PLACEHOLDER
                            </Typography>
                            <Box
                                sx={{
                                    marginLeft: 'auto',
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center",
                                }}
                            >
                                <NavbarMobile />
                            </Box>
                        </Box>
                    )}
                    {isTablet && isPortrait && (
                        
                        <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%', padding: 0, margin: 0}}>
                            <Typography variant="h4" component="div" sx={{ flexGrow: 1, color: '#FFD700', margin: "2vh" }}>
                                PLACEHOLDER
                            </Typography>
                            <Box
                                sx={{
                                    marginLeft: 'auto',
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center",
                                }}
                            >
                                <NavbarMobile />
                            </Box>
                        </Box>
                    )}
                    {isTablet && isLandscape && (
                       
                        <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%', padding: 0, margin: 0, }}>
                            <Typography variant="h4" component="div" sx={{ flexGrow: 1, color: '#FFD700', margin: "2vh" }}>
                                PLACEHOLDER
                            </Typography>
                            <NavbarDesktop />
                        </Box>
                    )}
                    {isDesktop && (
                       
                        <Box sx={{ display: 'flex', flexDirection: 'row', padding: 0, margin: 0 }}>
                            <Typography variant="h4" component="div" sx={{ flexGrow: 1, color: '#FFD700', margin: "2vh" }}>
                                PLACEHOLDER
                            </Typography>
                            <NavbarDesktop />
                        </Box>
                    )}
                </>
        </AppBar>
    );
};

export default NavbarMain;

navBarMobile:

import * as React from 'react';
import Toolbar from "@mui/material/Toolbar";
import {Chip, Dropdown, Menu, MenuButton, MenuItem} from "@mui/joy";
import {Link} from "react-router-dom";
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
import {Divider, withStyles} from "@mui/material";
import styled from "@emotion/styled";

interface Props {
}


const OwnMenuItem = styled(MenuItem)({
    justifyContent: "center", // Center align items horizontally
    textAlign: "center", // Center align text
    margin: "5%",
});

const OwnMenu = styled(Menu)({
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    zIndex: 10000,
    borderColor: '#FFD700',
    backgroundColor: '#556B2F',
    width: '45vw',
});

const LinkStyled = styled(Link)({
    textDecoration: 'none',
    color: '#FFD700',
    width: '100%',
    height: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center', 
    flexGrow: 1,
});


const NavbarMobile: React.FC<Props> = () => {
    return (
        <Toolbar sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
        }}>

            <Dropdown>
                <MenuButton sx={{borderColor: '#FFD700'}}>
                    <MenuOutlinedIcon sx={{color: '#FFD700'}}></MenuOutlinedIcon>
                </MenuButton>

                <OwnMenu >
                    <OwnMenuItem sx={{
                        borderColor: '#FFD700',
                        width: "90%",
                        textAlign: "center",
                        display: "flex",
                        justifyContent: "center" 
                    }}>
                        <Link to="/" style={{textDecoration: 'none', color: '#FFD700', width: "100%", height: "100%"}}>Home</Link>
                    </OwnMenuItem>

                    <Divider
                        sx={{
                            borderColor: '#FFD700',
                            borderWidth: '1px',
                            width: '80%',
                            '&::before, &::after': {
                                borderColor: '#FFD700',
                                borderWidth: '1px',
                            }
                        }}
                    >
                        <Chip variant="soft" sx={{backgroundColor: "#475927", color: '#FFD700'}}>
                              .  Zeit  .
                        </Chip>
                    </Divider>

                    <OwnMenuItem sx={{
                        borderColor: '#FFD700',
                        width: "90%",
                        textAlign: "center",
                        display: "flex",
                        justifyContent: "center" 
                    }}>
                        <Link to="/zeit/vergangenheit"
                              style={{textDecoration: 'none', color: '#FFD700', width: "100%", height: "100%"}}>Vergangenheit</Link>
                    </OwnMenuItem>

                    <OwnMenuItem sx={{
                        borderColor: '#FFD700',
                        width: "90%",
                        textAlign: "center",
                        display: "flex",
                        justifyContent: "center"
                    }}>
                        <Link to="/zeit/aktuell" style={{textDecoration: 'none', color: '#FFD700', width: "100%", height: "100%"}}>Gegenwart</Link>
                    </OwnMenuItem>

                    <OwnMenuItem sx={{
                        borderColor: '#FFD700',
                        width: "90%",
                        textAlign: "center",
                        display: "flex",
                        justifyContent: "center"
                    }}>
                        <Link to="/zeit/zukunft" style={{textDecoration: 'none', color: '#FFD700', width: "100%", height: "100%"}}>Zukunft</Link>
                    </OwnMenuItem>

                    <Divider sx={{borderColor: '#FFD700', width: "80%"}}>
                    </Divider>

                    <OwnMenuItem sx={{
                        borderColor: '#FFD700',
                        width: "90%",
                        textAlign: "center",
                        display: "flex",
                        justifyContent: "center"
                    }}>
                        <Link to="/studio" style={{textDecoration: 'none', color: '#FFD700', width: "100%", height: "100%"}}>Studio</Link>
                    </OwnMenuItem>

                    <OwnMenuItem sx={{
                        borderColor: '#FFD700',
                        width: "90%",
                        textAlign: "center",
                        display: "flex",
                        justifyContent: "center"
                    }}>
                        <Link to="/live" style={{textDecoration: 'none', color: '#FFD700', width: "100%", height: "100%"}}>Live</Link>
                    </OwnMenuItem>
                </OwnMenu>
            </Dropdown>
        </Toolbar>
    );
};

export default NavbarMobile;

navBarDesktop:

import * as React from 'react';
import Toolbar from "@mui/material/Toolbar";
import {Dropdown, Menu, MenuButton, MenuItem} from "@mui/joy";
import {Link} from "react-router-dom";

interface Props {}

const NavbarDesktop: React.FC<Props> = () => {
    return (
        <Toolbar sx={{alignItems: "left", justifyContent: "left"}}>
            <Dropdown >
                <MenuButton sx={{margin: "10px", borderColor: '#FFD700', width: "5vw", padding: 0}}>
                    <Link to="/" style={{ textDecoration: 'none', color: '#FFD700' , width: "100%", height: "100%"}}>Home</Link>
                </MenuButton>
            </Dropdown>
            <Dropdown>
                <MenuButton sx={{margin: "10px", borderColor: '#FFD700',color: '#FFD700', width: "5vw", padding: 0  }}>Zeit</MenuButton>
                <Menu sx={{zIndex: 10000, borderColor: '#FFD700',backgroundColor: '#556B2F'}}>
                    <MenuItem sx={{margin: "5px"}}>
                        <Link to="/zeit/vergangenheit" style={{ textDecoration: 'none', color:  '#FFD700' , width: "100%", height: "100%"}}>Vergangenheit</Link>
                    </MenuItem>
                    <MenuItem sx={{margin: "5px"}}>
                        <Link to="/zeit/aktuell" style={{ textDecoration: 'none', color:  '#FFD700' , width: "100%", height: "100%"}}>Aktuell</Link>
                    </MenuItem >
                    <MenuItem sx={{margin: "5px"}}>
                        <Link to="/zeit/zukunft" style={{ textDecoration: 'none', color: '#FFD700' , width: "100%", height: "100%"}}>Zukunft</Link>
                    </MenuItem>
                </Menu>
            </Dropdown>
            <Dropdown>
                <MenuButton sx={{margin: "10px", borderColor: '#FFD700', width: "5vw", padding: 0}}>
                    <Link to="/studio" style={{ textDecoration: 'none', color: '#FFD700', width: "100%", height: "100%"}}>Studio</Link>
                </MenuButton>
            </Dropdown>
            <Dropdown>
                <MenuButton sx={{margin: "10px", borderColor: '#FFD700', width: "5vw", padding: 0}}>
                    <Link to="/live" style={{ textDecoration: 'none', color: '#FFD700', width: "100%", height: "100%"}}>Live</Link>
                </MenuButton>
            </Dropdown>
        </Toolbar>
    );
};

export default NavbarDesktop;

this was the code of the whole navbar.

thanks for your help

kind regards

ive tried several things, but nothing really functioned.

could it be the case, that this is only a problem with the browser, resp. the “inspect” stuff of the browser? that would be strange but possible.