Hello, I am new to React but I am trying to learn it in order to create a personal website. I am creating a "Timeline" section on my website followed by a "Contact" one. How can I prevent the Timeline section's contents from overflowing into the next section but also show all the contents of the Timeline section? . This is what it currently looks like: The blue portion is where the contact section starts
Edit: App.jsx
function App() {
const [menuOpen, setMenuOpen] = useState(false)
return (
<div className="app">
<Navbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
<Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
<div className="sections">
<Intro/>
<Timeline/>
<Contact/>
</div>
</div>
);
}
app.scss
.app {
height: 100vh;
.sections {
width: 100%;
height: calc(100vh - 70px);
// background-color: #1F1D36;
position: relative;
top: 70px;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
scrollbar-width: none; // for firefox
&::-webkit-scrollbar{
display: none;
}
> * {
width: 100vw;
height: calc(100vh - 70px);
scroll-snap-align: start;
}
}
}
EDIT: I have created a new post with the entire sandbox linked to it
https://dev.to/ssingh1997/how-to-prevent-an-icon-from-being-cut-off-5781
Top comments (6)
Well its hard to say but may be try to change the normal height to min-height because you are setting the harcoded height.
thanks Jatin! This actually worked but then my snap scroll stops working
Hard to say without seeing any code...
Hi James, I apologize, I thought I had posted my code but it seems like I had not. I have edited my answer to include my App.jsx and my app.scss file. Please let me know what else I can provide, thanks!
Don't use a set height on your
.sections(and every child within it> *for that matter). Doing this restricts the browser from naturally calculating the height in needs for the content (your Timline) to fill the container.Is there a way I can change for each one? I tried doing the nth child but that had no effect