Looking at this page title with the background image, in FF (not private mode) there’s a gap whereas in Chrome (not Incognito mode) the heading looks centered.
If I was to look at the same page in FF in Incognito Mode, the page title looks fine. I’m not sure which view to rely on.
Do you use any reset styles to zero out all the default browser padding and margins and start from scratch with your own styles? That way you will avoid the browser differences.
There is already a reset in place that does that.
Have you tried using the code inspector to see if it shows what the extra space is?
I can’t see what you mean as they all look the same to me. A screenshot showing the differences might help 
Thank PaulOB.
Once again, it’s an odd anomaly where NOW if I clear my browser cache, it’s still there. I restarted my system, and then all looks normal. Odd.
Still looks the same to me in Firefox and private version.
I would however get rid of the before and after rules on masthead because a flex container doesn’t need containment and the items may get rendered as flex items.
Your picture looks like you are losing the 25px padding-top on header.site-header some how.
Still looks the same to me in Firefox and private version.
So what does it look like in FF when you’re not using private?
If I adjust the padding to 97px to .site-content, then it looks normal in Firefox standard, but in Chrome and IE you can see a slight imbalance in the page heading and that doesn’t necessarily fix the problem.
I already answered that
I’m still not seeing the issue but you should not be messing about with padding and content height to make room.
You have a fixed header so in order to have content underneath you need a known fixed height. Set the height of the header in pixels and vertically centre the inner content without the need for padding (you are using flex anyway). Then you can start your site content at the exact padding px distance that you made for the height of the fixed header,
Generally though I avoid fixed headers for this reason and I find a better alternative is to have a normal header but once the user starts scrolling then you can fix it in position (using js). In this way you avoid the content being underneath the header except when you have scrolled.
Okay. I’ve found out why (stupidity beyond reasoning)–
In WordPress there’s an adminbar that (even though hidden) does tend to push things down and give the illusion that there is an added space.
Not only did I fix the CSS as per your recommendation, but I also logged out of my browser where I was seeing the gap and that issue disappeared.
FYI, there is a WordPress plugin that hides the admin bar while you are viewing the site while developing, which you can toggle on and off. I often use it to get rid of the admin bar. Try looking for “Admin Bar Toggle” in the Plugin repository.
Thank you, but I just decided to hide it with CSS and modify the margin to ‘0’ instead of installing/loading another plugin.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
