search

zwbetz-gh / cupper-hugo-theme

An accessibility-friendly Hugo theme, ported from the original Cupper project.
https://cupper-hugo-theme.netlify.app/
MIT License
301 stars 190 forks source link

White Appears Below the Footer When in Dark Mode on Smartphones #77

Closed tedmagaoay closed 2 years ago

tedmagaoay commented 2 years ago

Describe the bug

White appears below the footer when in dark mode on smartphones with little or no content pages. Especially when the navTitleText is used instead of the default SVG logo. Everything seems to go up leaving that white space behind.

To Reproduce

Steps to reproduce the behavior:

  1. Use the navTitleText instead of an SVG.
  2. Open a smartphone browser.
  3. Go to a page with little or zero content.
  4. Turn the dark theme on.

Expected behavior

Dark mode all the way down, even if the page has just a little content or nothing at all.

Screenshots

Here there is that white space below the footer.

has

Vs

Here everything is fine.

has-not

Smartphone

zwbetz-gh commented 2 years ago

Interesting.

Have you messed with the default CSS? Because the main element should have a min-height of 100vh, which would force the page to span the full height of the viewport, regardless if there was not enough content on the page.

Now, this could be a bug with your particular mobile device browser.

Also, you didn't mention any scrolling behavior. But if that's your issue, the "overscroll" that happens on both mobile and desktop browsers is normal. Regardless, I've pushed a change to disable this overscroll behavior. See https://github.com/zwbetz-gh/cupper-hugo-theme/commit/be6536778d36eaa223cf492d18af3d4dd9163104

tedmagaoay commented 2 years ago

Thank you for your reply and time.

I'm sorry I don't have any CSS knowledge.

I've tried the latest commit and it still persists.

aaa

zwbetz-gh commented 2 years ago

Ahh, I see now. Okay, I can reproduce this 🙂

Before

Screen Shot 2022-09-20 at 10 27 06 AM

After

Screen Shot 2022-09-20 at 10 27 50 AM

Explanation

The issue is that the min-height of the main element is being changed to auto by a media query on small (mobile) view ports. I've commented it out and done some smoke testing. It seems okay for now. I'll push that change shortly.

zwbetz-gh commented 2 years ago

Pushed https://github.com/zwbetz-gh/cupper-hugo-theme/commit/4a56374eeb217c78d9fc9e3c600c899e848acf21

Retest and let me know how it goes

tedmagaoay commented 2 years ago

It's okay now.

Thank you so much sir.

Have a great day.

zwbetz-gh commented 2 years ago

Very nice