#11 bug fix : gap between content and nav / fixing navbar/logout on mobile.

[Youspeakcubic]

#11 Mobile Nav Padding Top bug fix

These changes will add a gap between the bottom of pages and the bottom nav bar as to not cut off content, as well as fixing the bottom nav bar breaking on mobile/tablet. It also changes some font sizing and issues with logout z-index.

• Fixing far right nav bar icon not appearing on certain screens
• Adding gap to bottom of screens between content and nav bar.
• Z-index fix for logout button
• Font sizing fixes

Fixing nav bar icon

Context: The nav bar would break around 600px width and on really small viewports. This was due to a css rule from material ui creating a min-width on the buttons in the nav. I gave the navbar buttons all a rule overruling the MUI rule and this fixed the issue.

Before:

After:

Creating a gap between content and nav

Context: On mobile/tablets going to the bottom of the screen, the navbar would overlap content. I was able to fix this issue on the library of context, I just added a class to the tab container which holds all the media cards. I then added a margin-bottom rule to this class and made it responsive by using vh units thus there's no obscenely large gap on any viewports. I made a similar fix with the mentorship page, the container already had a class defined however so it was just adding a margin-bottom rule to it.

Before:


After:

Z-index fix for logout

Before:

After:

Font size fixes:

Context: The library of context tab picker had a very large font size that on some screens would not allow you to click the last tab. I changed the font to be responsive on mobile/tablet and this fixed the issue for the most part.

Before:

After:

[mikhael28]

@Youspeakcubic this looks fantastic so far, thank you for including the visual cues in the PR for me. You can login to the mentorship page, but logging in with mentorship@platohq.com and the password password123. thank you for taking the time to fix related issues, not explicitly mentioned in the ticket!

[mikhael28]

Looking at the PR again, really great work so far.

[Youspeakcubic]

@mikhael28 Thank you for the guidance, i was able to login into the mentor ship page and make the same fix as the library of context. If any revisions are needed or i missed anything please let me know 😃.

[mikhael28]

This is great, I'm going to go ahead and merge this in! Awesome contribution, I'm happy that smaller screen-sizes/budget phones now have a much better experience! I'm going to re-use your GIF in the README documentation as well, to highlight the responsive nature of the progressive web application!

[mikhael28]

You are killing the game - would you please go introduce yourself to the rest of the team in #17 ?

Let me know what else you are looking for from this project, and what your career goals are.