-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vertical overlapping of contact-footer (tablet and desktop mode) #2
Comments
@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 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. In other desktop operating systems, or non Apple browsers the scrollbar may not disappear the same. |
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). |
@micey969 to get the scroll bar on the sidebar set it to scroll.
Then the absolutely positioned contact footer would need to be relative.
Since the site is currently desktop first, a media query would need to be used to "undo" styles for the larger desktop height. |
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. |
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?
The text was updated successfully, but these errors were encountered: