Content doesn’t stay when shrunk vertically

Working on the narrow view of my portfolio website and everything is looking good. I just need to add a hamburger menu and have the text animate onto the screen as I scroll.

But I am having trouble finding a way to keep the content in one section from overflowing into the next section. I have tried using min-height: 100vh but it doesn’t work. Anyone know how to fix this?

I am finding it difficult to capture the story you are trying to tell here. But the much I could understand is that you are trying to make some contents fixed or sticky at a certain position :thinking: while you scroll.
If that be case, then you should select the object and give it CSS position property with the value of sticky and give it offsets.

I understand that codepen requires pro (paid) account for you to upload files from your computer.
I would suggest you use other platform like “GitHub” to share your code so that we can have a live preview of the problem you are trying to resolve.; screenshots is not enough.

Finally, from the code you shared (CSS). I noticed that you have a lot of media queries with the same break point. I suggest you combine all to one query code block as this will make the debugging easier.

1 Like

What I meant by “offsets” is the position you want the “sticky” effect happen. Like

ul {
top: 5px;
left: 0px;
}

I have cloned your repository and noticed that a lot of things going wrong. You are over engineering your CSS with position of absolute, which is one the things I suspected that is causing this👇

However, I would like you to give me some time so that I will take a closer look on your codes and correct the errors.
Expect my solution towards next weekend, I have exams to write next week, which I need to prepare.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.