The recent theme update has caused an issue with the header alignment on the website. Before the update the header and the body lined up as we wanted. Centered. When we resize the screen the header piece did not move, nor did the page below.
Since the recent update it looks like the header is now moving to the left and out f alignment when resize the screen manually.
Here is an explanation from the site owner, Phil:
"
I am seeing he problem in both Safari and Edge. Yes, when the browser window is wide enough, everything looks fine, but if you reduce the width of the browser window by “grabbing” the right hand edge of the window and moving it to the left, the page content (all pages) and the webpage header remain central in the browser window up until a certain point (narrowness), and then the main content reaches a point where it will no longer move to the left. But the header continues to remain central, which means it continues to move closer to the left hand edge of the window while the main content doesn’t, which means the header and the main content go out of alignment. If you continue to make the window narrower, eventually the header will stop moving too.
It's the same basic problem we had when you were initially building the site. The problem seems to be that the total width of the header is different to the total width of the content on the page. By total width I’m including all the buffer elements you put in place to keep the main content alignment in place whatever the window width is. (Ignoring when the window gets super narrow and all the content gets crunched up, as we see on a mobile device.)
When you reduce the width of the window the left edge of the page content hits the left edge of the window (or however WordPress is managing the boundaries either side of the content) and it stops getting closer to the left-hand edge of the window while the header keeps getting closer up to a certain point.
It’s behaving as if the overall width of the header is smaller than the page content. You managed to fix this issue way back when, but it looks like the theme updates are reintroducing it somehow, or causing it to happen again.
I would start by looking at the full width of the page content versus the full width of the header. Do you remember when you showed the outer boundary lines for the main content and the header.
The problem shows in Edge and Safari, and on different resolution screens, so you should be able to see it there simply by reducing the width of your browser window and watching the alignment on the left edge as the content as you reduce the width of the window.
Is it possible you know what was changed in the recent update that is causing this to become unaligned?
The recent theme update has caused an issue with the header alignment on the website. Before the update the header and the body lined up as we wanted. Centered. When we resize the screen the header piece did not move, nor did the page below.
Since the recent update it looks like the header is now moving to the left and out f alignment when resize the screen manually.
Here is an explanation from the site owner, Phil:
"
I am seeing he problem in both Safari and Edge. Yes, when the browser window is wide enough, everything looks fine, but if you reduce the width of the browser window by “grabbing” the right hand edge of the window and moving it to the left, the page content (all pages) and the webpage header remain central in the browser window up until a certain point (narrowness), and then the main content reaches a point where it will no longer move to the left. But the header continues to remain central, which means it continues to move closer to the left hand edge of the window while the main content doesn’t, which means the header and the main content go out of alignment. If you continue to make the window narrower, eventually the header will stop moving too.
It's the same basic problem we had when you were initially building the site. The problem seems to be that the total width of the header is different to the total width of the content on the page. By total width I’m including all the buffer elements you put in place to keep the main content alignment in place whatever the window width is. (Ignoring when the window gets super narrow and all the content gets crunched up, as we see on a mobile device.)
When you reduce the width of the window the left edge of the page content hits the left edge of the window (or however WordPress is managing the boundaries either side of the content) and it stops getting closer to the left-hand edge of the window while the header keeps getting closer up to a certain point.
It’s behaving as if the overall width of the header is smaller than the page content. You managed to fix this issue way back when, but it looks like the theme updates are reintroducing it somehow, or causing it to happen again.
I would start by looking at the full width of the page content versus the full width of the header. Do you remember when you showed the outer boundary lines for the main content and the header.
The problem shows in Edge and Safari, and on different resolution screens, so you should be able to see it there simply by reducing the width of your browser window and watching the alignment on the left edge as the content as you reduce the width of the window.
Is it possible you know what was changed in the recent update that is causing this to become unaligned?
Thank you
"
Hello there,
Thank you for getting in touch.
Try disabling your auto optimize plugin or CDN plugins installed and let us know how that goes.
Kind regards,
Hello Andrew,
Thank you for your reply.
I've disabled the CDN
I am not sure which plugin you are referring to, I've included the currently installed plugins. Please clarify.
Attached files: plugins.PNG
Hello there,
Thank you for getting back to us.
Could you please share a screenshot of what the header should look like? Also, try clearing your CDN cache and let us know how that goes.
Kind regards,