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

x/website: sidebar overlaps with footer on short screens #58134

Closed
ankit-verma-209171 opened this issue Jan 29, 2023 · 5 comments
Closed

x/website: sidebar overlaps with footer on short screens #58134

ankit-verma-209171 opened this issue Jan 29, 2023 · 5 comments
Labels
FrozenDueToAge NeedsFix The path to resolution is known, but the work has not been done. website

Comments

@ankit-verma-209171
Copy link

What is the URL of the page with the issue?

https://go.dev/solutions/clis

What is your user agent?

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Screenshot

image

What did you do?

I was exploring use cases for the Go Language and the cli section on go.dev and found this issue

Steps to reproduce:

  1. go to any specific use-case page on the website eg. why go -> use cases -> clis
  2. scroll down to the bottom of the page
  3. can see the overlapping aside section with footer

Can be reproducible for Chrome, and also on Edge browser

What did you expect to see?

content - aside section should not overlap with footer

What did you see instead?

overlapping content - aside section with footer

Screenshot (72)

On inspecting the css, I found fixed position in the .UseCaseSubNav-anchorLinks--sticky class might be the cause
refer https://github.com/golang/website/blob/master/_content/css/styles.css#L3646-L3649

.UseCaseSubNav-anchorLinks--sticky {
  position: fixed;
  top: 2rem;
}

Possible Fix

While experimenting, I found that changing the position to sticky from fixed solves this issue

.UseCaseSubNav-anchorLinks--sticky {
  position: sticky;
  top: 2rem;
}

Screenshot (73)

@gopherbot gopherbot added this to the Unreleased milestone Jan 29, 2023
ankit-verma-209171 added a commit to ankit-verma-209171/website that referenced this issue Jan 29, 2023
ankit-verma-209171 added a commit to ankit-verma-209171/website that referenced this issue Jan 29, 2023
@seankhliao seankhliao changed the title x/website: Content of Aside Section overlaps with the Site Footer of the go.dev website x/website: sidebar overlaps with footer on short screens Jan 30, 2023
@mknyszek
Copy link
Contributor

CC @golang/tools-team

@mknyszek mknyszek added the NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. label Jan 30, 2023
@IanoNjuguna
Copy link

This is how it looks on my end
The client is: Linux Mint OS and Mozilla Firefox browser

image

@hyangah hyangah modified the milestones: Unreleased, website/later Feb 2, 2023
@hyangah hyangah added NeedsFix The path to resolution is known, but the work has not been done. and removed NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. labels Feb 2, 2023
@hyangah
Copy link
Contributor

hyangah commented Feb 2, 2023

Thanks @ankit-verma-209171 for the detailed report.

cc @jamalc

@ankit-verma-209171
Copy link
Author

I have attached a pull request (golang/website#190) to this issue that resolves this issue. The pull request was moved to Gerrit (https://go-review.googlesource.com/c/website/+/464015) for the code review seven days ago still no review or comment; as it is my first time contributing to the Golang website, I need help and guidance on how to proceed further and would love feedback on the pull request.

I've test run the website with the changes locally using the codespace environment.
Thanks

@gopherbot
Copy link

Change https://go.dev/cl/464015 mentions this issue: _content/css: fix content aside section overlapping with footer

@golang golang locked and limited conversation to collaborators Feb 10, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
FrozenDueToAge NeedsFix The path to resolution is known, but the work has not been done. website
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants