I’m experiencing a problem with in-page linking.
When I assign ID to a section which is inside a flex element, in-page linking does not work. I’m pretty sure that it’s because of flex element, since it does work if I change the display setting of the parent element from flex to normal block.
I found someone fixed this problem, but he didn’t mentioned how he fixed it.
Thank you for the reply. But I’ve already changed the structure of my site without using flex container.
I also found that it was not just about flex container, but I think it is related to the height setting : “100VH”. - but I’m not sure.
Will post the read-only link to this thread if I encounter a similar problem like this.
I really wanted to see your site with the link not working, you triggered my curiosity.
I have targeted elements within flex and it works so it must be something else. I don’t see how 100VH would interfere either. There are many other reasons.
I found this problem is because of the combination of settings as below :
Height setting = 100vh
Overflow setting = scroll
For some reason, I wanted to make Hero height as 100VH and also wanted it to be scrolled when the contents inside is longer than a browser height. As I told you, I already changed the structure differently, so I just made a simple test page as below.
Don’t you try to achieve a 100VH MIN HEIGHT on the hero? So that anytime the hero is shorter, it will take the screen height, and if it’s taller, then… it will just be taller than the screen height.