Vertical overlapping of contact-footer (tablet and desktop mode)

[micey969]

Actual Behaviour
I found some overlapping of the contact-footer section in aside whenever I view the site in any of my browsers.
From an article, I believe it could be due to the addition of the toolbar menu in my browser (chrome doesn't have the toolbar menu visible but there is still some minimal overlapping). It is taking away from the viewport height.

Expected Behaviour
No vertical overlapping.

Steps to Reproduce
View the portfolio site in tablet or desktop mode in heights below 690px (690px height is how it looks in my chrome browser and 650px is how it looks in mozilla).

I suggest maybe using a min-height and min-width media query to help with this issue. Any other suggestions?

[johnsBeharry]

@micey969 a potential quick fix you can try is to try out to regain some more vertical space, is to reduce the spacing between the logo and the heading from 3em to 1em. I haven't tested this for the size you specified though.

That being said, I don't believe you can account for more extreme cases using this method (see below) without implementing a solution that scrolls the sidebar's contents. This would be the best solution to apply in my opinion.

UPDATED WITH DEMO:

In other desktop operating systems, or non Apple browsers the scrollbar may not disappear the same.

[micey969]

I have actually done that exact method you suggested inside of the inspector before @johnsBeharry and it helps for my specific screen. But as you said, it doesn't account for the extreme cases (anything below 650px).

[johnsBeharry]

@micey969 to get the scroll bar on the sidebar set it to scroll.

#mainSide {
    overflow-y: scroll

Then the absolutely positioned contact footer would need to be relative.

.contact-footer {
    position: relative;

Since the site is currently desktop first, a media query would need to be used to "undo" styles for the larger desktop height.

[micey969]

Okay then. Thanks @johnsBeharry . I'm currently working on making the site mobile first, so I'll add it in while I'm doing that.