Menu
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;
`;
660
Hope this can help, but maybe your case are not the same. Becase I can not see your real HTML that components's renders
<S.PageContainer>
<PageHeaderAD currentUser={currentUser} logOut={logOut} />
<S.PageContent>
<Switch>
[...]
</Switch>
</S.PageContent>
</S.PageContainer>
After some research. I found that the reason(in my case) is in the <span /> tag.
The <span /> will remain one line of its content.
If your <span />'s font size is too large, it will force the browser to resize and cause this problem.
example:
<span style="text-align: left; font-size: 50px;"></span>
Because the font-size is 50px, so the span will let font size be 50px, at the mean time still remain one line of its content.
The result will be like this (an image form my project)
My solution is to change the fontSize by vh unit. Let the fontSize change with the height of screen.
151
answered May 12 '26 02:05
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With