Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Footer links/columns "shift" to the right when navigating through site's "sections" on mobile #485

Closed
cheercroaker opened this issue Mar 6, 2018 · 3 comments
Labels
bug An error in the Docusaurus core causing instability or issues with its execution difficulty: starter Issues that are starter difficulty level, e.g. minimal tweaking with a clear test plan. good first issue If you are just getting started with Docusaurus, this issue should be a good place to begin. status: claimed Issue has been claimed by a contributor who plans to work on it.

Comments

@cheercroaker
Copy link
Contributor

Is this a bug report?

Yes.

Have you read the Contributing Guidelines on issues?

Yes.
I proudly contributed to 2 merged PRs recently—:tada:—but for this one I won't be able to directly bring a fix myself as easily (should be easy for a CSS Jedi though), hence this issue.

Environment

Observed on Linux (Linux Mint 18.3 KDE) with Firefox & Chromium browser.
Node 8.9.4 / npm 5.6.0.
Latest (1.0.7) version of Docusaurus at least.

Can also be observed on the Docusaurus public website as well in the docs part (https://docusaurus.io/docs/).

Steps to Reproduce

  1. Have a running Docusaurus instance (e.g. the vanilla example one)
  2. Open a browser and go to the docs part
  3. Minimize browser width to simulate a small smartphone
  4. Scroll down to the bottom of the page to display the footer
  5. With the breadcrumb, select the second section of the docs
  6. Scroll down to the bottom of the page to display the footer
  7. With the breadcrumb, select the third section of the docs
  8. Scroll down to the bottom of the page to display the footer

Expected Behavior

At steps 4, 6 and 8, the footer should display links & columns aligned to the left of the page.

Actual Behavior

  • For the first section of the docs, step 4 is OK.
  • Starting from the second section of the docs, step 6 is KO (links & columns are shifted to the right).
  • For the third section of the docs, step 8 is KO (links & columns are even more shifted to the right).

Seems that after third section, footer links & columns are still "KO" in this sense but are "as shifted as the third section's footer")

Reproducible Demo

One can directly see the the phenomenon by going to these URLs for steps 2, 5 and 7:

Or set up the example project and see it locally:

  • step 4:
    01-docusaurusfirstsectionfooter

  • step 5:
    02-docusaurussectionselection

  • step 6:
    03-docusaurussecondsectionfooter

  • step 8
    04-docusaurusthirdsectionfooter

See the "shifting"? 😉

@JoelMarcey JoelMarcey added bug An error in the Docusaurus core causing instability or issues with its execution good first issue If you are just getting started with Docusaurus, this issue should be a good place to begin. difficulty: starter Issues that are starter difficulty level, e.g. minimal tweaking with a clear test plan. labels Mar 8, 2018
@JoelMarcey
Copy link
Contributor

@cheercroaker Excellent write-up of the issue. With great description and images. Thank you!

@ajomadlabs
Copy link

Can I to take up this issue

@JoelMarcey
Copy link
Contributor

@ajomadlabs Would love a PR for this. Thank you!

@JoelMarcey JoelMarcey added the status: claimed Issue has been claimed by a contributor who plans to work on it. label Mar 12, 2018
ryzokuken added a commit to ryzokuken/Docusaurus that referenced this issue Mar 17, 2018
JoelMarcey pushed a commit that referenced this issue Mar 19, 2018
* Make sure the sitemap in footer is left align

Fixes: #485

* Restore original max-width and change width inside media query
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution difficulty: starter Issues that are starter difficulty level, e.g. minimal tweaking with a clear test plan. good first issue If you are just getting started with Docusaurus, this issue should be a good place to begin. status: claimed Issue has been claimed by a contributor who plans to work on it.
Projects
None yet
Development

No branches or pull requests

4 participants
@JoelMarcey @cheercroaker @ajomadlabs and others