Attempting to customize the background of a react app page, I applied styling to the main div that encompasses all components using the background property in CSS. This main div has a className called Wrapper in my app. However, the background only covers a portion of the screen instead of filling up the entire space. Here is the code snippet and visual representation:
JSX:
render() {
return (
<div className="wrapper" >
<div>Inner content</div>
</div>
) }
CSS:
.wrapper {
overflow: hidden;
background: linear-gradient(#42275a, #734b6d);
}
https://i.sstatic.net/BNyv2.png
The issue lies in the fact that only the top part changes color, leaving the rest of the page white.
Attempts were made like adding "height: 100%", "min-height: 100%", "height: 100vh", or "min-height: 100vh" to the wrapper class, but none resolved the issue.
Further efforts involved modifying the body property in the CSS:
body {
background: linear-gradient(#42275a, #734b6d);
}
However, this resulted in an unsightly line separating the wrapper from the body as shown here: https://i.sstatic.net/WDRnW.png
The main question remains why the main div (wrapper) fails to occupy the entire screen when it contains all content extending beyond the visible area. How can the background fill the complete screen without any separation?
Furthermore, the distinct elements of the body and wrapper raise curiosity about their segmentation. The desire is for a seamless transition between these areas without any dividing lines.
Additions to the App.js file are shared below:
render() {
if (this.state.loading) {
return null;
}
else {
return (
<div className='app'>
{this.state.user ?
<LoggedIn /> :
(<HomePage />)}
</div >
);
}
}
.app {
height: 100%
}
Code snippets from Index.js and Index.css provide additional insight:
ReactDOM.render(
<Elements stripe={promise}>
<BrowserRouter>
<React.StrictMode>
<ScrollToTop>
<App />
</ScrollToTop>
</React.StrictMode>
</BrowserRouter>
</Elements>,
document.getElementById('root')
);
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
align-items: center;
}
A screenshot showcasing the Elements section from Developer tools is shared for reference: https://i.sstatic.net/wQj81.png
The recent removal of CSS properties from the wrapper per Dan Zuzevich's suggestion did eliminate the wrapper element, resulting in a gradient-filled screen following the body's CSS settings. Nevertheless, the screen still displays divisions or fragments instead of presenting a cohesive view. Any insights on resolving this issue? Visual representations provided below: https://i.sstatic.net/IjVZI.png