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

New MVP footer has <hr> element adding extra space #15152

Closed
reemhamz opened this issue Sep 16, 2024 · 2 comments
Closed

New MVP footer has <hr> element adding extra space #15152

reemhamz opened this issue Sep 16, 2024 · 2 comments
Labels
Bug 🐛 Something's not working the way it should Frontend HTML, CSS, JS... client side stuff Refresh 🦖 Work related to the 2024 site refresh

Comments

@reemhamz
Copy link
Contributor

reemhamz commented Sep 16, 2024

Description

The new MVP footer's pixelated design is only available on the home and about pages. However, on other pages that don't have it, there's an extra space from a leftover <hr> element

Steps to reproduce

  • Go to a random page that isn't the home or about page (i.e. http://localhost:8000/en-US/advertising/)
  • Scroll all the way to the bottom of the page
  • Notice a grey horizontal line (<hr>) that's floating above the black footer with extra spacing above and below it.

Expected result

No <hr> element or space around it:

Screenshot 2024-09-16 at 4 19 03 PM

Actual result

An <hr> element with space around it:
Screenshot 2024-09-16 at 4 15 27 PM

What happened.

Environment

MacOS Sonoma 14.6.1, Firefox 130.0

@reemhamz reemhamz added Bug 🐛 Something's not working the way it should Refresh 🦖 Work related to the 2024 site refresh Frontend HTML, CSS, JS... client side stuff labels Sep 16, 2024
@stephaniehobson
Copy link
Contributor

I think the right thing to do here is to add the styles that transform the hr into the pixelated line. I think that means adding them to the footer's CSS files.

@janbrasna
Copy link
Contributor

I have tried adding the transition divider styling everywhere in #15194, but… some pages that end with colour shapes don't work well with that, like:

Screenshot 2024-09-22 at 19 10 59

Screenshot 2024-09-22 at 17 45 17

Screenshot 2024-09-22 at 19 24 32

Hiding the hr for now with low specificity .m24-c-transition * { display: none; } (that's only effective until the proper declaration is loaded) looks perhaps better — but that doesn't solve the issue once 2024 styles are turned on site-wide — when that divider gets styled globally and places with somewhat rectangular blocks ending the pages will display like this anyway…

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug 🐛 Something's not working the way it should Frontend HTML, CSS, JS... client side stuff Refresh 🦖 Work related to the 2024 site refresh
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

4 participants