Get started button missing on mobile
Opened this issue · 2 comments
Renders the mobile site unusable - fix ASAP!
Introduced in #251, specifically a8253bd
I'll leave this to you @cloudyyoung because I'm not sure if you want this button appearing once or twice and I can't find mobile designs for landing page in the new prototype
The "Get Started" was not there for quite a long time actually, so a8253bd wasn't really the issue, it was some time before that I believe.
Here's a little technical css stuff going on.
So in the desktop design prototype, there are two get started button, one in the hero section and another at the near bottom; mobile prototype does not have a get started button in the hero section but instead a floating button at the bottom of the window, and when users scroll down in the landing page, the floating get started button will overlap with the second get started button and the floating button would no longer be floating.
https://www.w3schools.com/howto/howto_css_sticky_element.asp
So what the code was doing is to completely hide the first get started button on mobile screens, and then set the second get started button as a sticky element. BUT, there's problem with a sticky element.
- A
stickyelement would only be sticky to its immediate parent element, so if we ever want to have an element that's sticky to the window, then that element must be put right intobodyand not within any additional container. - The container must have a defined
height, it cannot beauto.
The whole body container used to be a fixed element filled the entire screen but it introduced scrolling bug on touch screens, so body no longer has a defined height, and the get started button gracefully no longer be sticky as expected.
Currently the second get started button is still there and users can scroll down to navigate to the app.
There used to be a sticky button, now there is no button anywhere on mobile. It is impossible to navigate to the app without manually appending /app in the url bar