I am trying to implement a frame around my website that overlaps elements.
Although I created a styled div for the frame, it seems to have a bug and looks like this:
Below is the React code I am using:
class About extends Component {
render() {
return (
<div className="frame">
<div className="container">
<div className="grid">
<div className="grid-item grid-item-1">{<Toggle />}</div>
<div className="grid-item grid-item-2">{<Text />}</div>
<div className="grid-item experience">{<StatsExp />}</div>
<div className="grid-item clients">{<StatsClients />}</div>
<div className="grid-item articles">{<StatsArticles />}</div>
<div className="grid-item words">{<StatsWordsCV />}</div>
<div className="grid-item grid-item-3">
{<Picture />}
{<Social />}
</div>
<div className="grid-item grid-item-5">{<Navigation />}</div>
<div className="grid-item grid-item-6">{<Butt />}</div>
</div>
</div>
</div>
);
}
}
export default About;
This is the CSS code being used:
**.frame {
width: 100vw;
height: 68vh;
border-left: 1px green solid;
border-right: 1px green solid;
border-top: 1px green solid;
border-bottom: 1px green solid;
position: absolute;
z-index: 200;
}**
.container {
position: relative;
min-width: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 1px;
padding: 1px;
height: 100vh;
}
Despite all efforts, I cannot figure out why it isn't working correctly.