I have a React app (not React Native). I worked on it in my browser, made it responsive etc. Now I wanted to check how it would look on mobile devices.
I was surprised to see this:
As you can see, the page header gets smaller and some elements like user avatar overflow it. This is particularly strange since the div I selected in dev tools is root - the one that all of the app content goes too (I've bootstrapped the project via create-react-app). So the navbar shrinks to the root div width, but the elements like the user avatar not - which is odd, since this is a grid and they should soon stack on top of each other, reorganize.
Now this works perfectly fine when I look at it normally in the browser, even if I shrink the page to like 150 pixels width - navbar covers page's full width, the elements are being organized properly.
I thought that it's maybe some device emulator bug, so I checked on my smartphone - no luck, pretty much the same thing as in here. So this is not like this white stripe would not be in the viewport, I can see it on my phone even if I maximally zoom my mobile chrome browser out.
What could cause that kind of thing?
P.S Same thing happens in Firefox
@Edit
index.tsx - here I access the root div
import App from "./containers/App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
App component - I cut out the routes to reduce its size here:
const App = () => {
const [loggedIn, setLoggedIn] = useState(isAuthenticated());
const [currentUser, setCurrentUser] = useState<UserData | null>(null);
const classes = styles();
useEffect(() => {
if (!loggedIn) {
setCurrentUser(null);
return;
}
const getUser = async () => {
setCurrentUser(await getCurrentUser());
};
getUser();
}, [loggedIn]);
const logIn = () => {
setLoggedIn(true);
};
const logOut = () => {
setLoggedIn(false);
};
return (
<Router>
<S.PageContainer>
<PageHeaderAD currentUser={currentUser} logOut={logOut} />
<S.PageContent>
<Switch>
[...]
</Switch>
</S.PageContent>
</S.PageContainer>
</Router>
);
};
Containers used in App:
const PageContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;
const PageContent = styled.div`
flex: 1 1 auto;
`;
PageHeaderAD contains many things but it is wrapped in:
const PageHeader = styled.div`
background: #3f51b5;
`;