On desktop (768px+) the first section of my webpage is displayed fullscreen with 100% height/width, the content is vertically aligned to the centre of the screen Which works great. When the width of the screen is reduced below this range the 100% height/width is not used.
On smaller screens the navigation is collapsed/expanded using a toggle button – again this works great. The issue comes when the browser is made wider again. If you do this you can see the content is no longer centred vertically, unless you refresh the page.
The [role="banner"] has position: relative; set initially but this is replaced with position: absolute; in the 768+ query. I believe this is where the problem is but I kind of need the relative positioning for mobile as I like the way the nav works. Likewise for desktop, it needs absolute positioning so it doesn’t effect the 100% height/width layout?
Can anyone explain why this is happening/help me with this?
Codepen: http://codepen.io/moy/pen/dPzJgz
Note: The CSS for the 100% height/width section is within a @media screen and (min-width: 768px) and (min-height:768px) {} query. There is a @media only screen and (min-width: 768px) {} if you want to move the CSS into there – but I didn’t wanted to change the CSS too much for the example, incase it effected the results.
Also the vertically centred content was achieved using this method from a CSS Tricks article: https://css-tricks.com/centering-in-the-unknown :)
Thanks,
Steve
