asked on

Issue with Overlay Screen Sizing Issue Overwriting the footer in CSS

I would like some help with trying to resolve why my CSS is allowing the footer to bleed over the top of it.

First, to understand the problem, please watch this 1-minute video.
GrayBoxSizeIsse.mp4

Then to see this in action, please go to this page:
https://makingyourlifecount.net/player.php?ref=c15.20150717.1

If you shrink the screen height to a smaller size, less than 750 pixels, the gray box is pushed down below to the place where it bleeds into the footer. The footer layer is now on top of the gray box and as such, the gray box is hard to read and the gray box links that are on the footer do not work.

I'm sure it is a simple piece of CSS code or a <div> that needs to be added. Or maybe something with the z-index. But I'm having trouble finding it and would like some help.

Thank you for helping me solve this.

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Paul Konstanski

ASKER

David:

Thanks for the insight into this. I'm still working with trying to get this to work. I am using a style sheet that was "borrowed" from another application. As such, there are some built in features that probably were not done the right way. I have to try to decide if I just need to start over with a new style sheet and go from there or keep trying to patch this one. I know it's an issue of getting the height set according to what is displayed.

What I find interesting is that once you go down to mobile size width, the footer is automatically pushed down based on the length of the text in the gray box. But once you get to a certain width, that "rule" no longer applies and the text overlaps. Understanding that is my key.

Paul Konstanski

ASKER

As for the question about using PHP if statements instead, that's because the content changes based on user response. I know how to do PHP if statements when the page first loads and I am using some of those, but then the other "if statements" are used on the client side based on user response. I'm not sure how you'd do that in php since that is server side.

David S.

For viewports less than 768px wide "header .header-content" is not absolutely positioned. Absolute positioning removes elements from the document flow and as such elements that aren't descendants of them can't tell where they are and so won't grow in height to accommodate them. For wider viewports "header .header-content" was absolutely positioned to vertically center it (that's what top:50% with the transform:translateY(-50%) does).

Paul Konstanski

ASKER

Thanks. This was helpful. I'm thinking through how to best do this... it is tricky because of the variance from devices. But you've pointed me in the right direction. Thanks.