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

[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.