[Resolved] BLOG margin shift left

[Ruud]

I have setup a fixed homepage on my website in the making and everything looks fine when I select the different menu items. The blogpage is a standardpage at least for now. When i select it in the menu the whole contained page is slightly shifting to the left. I cannot find any setting to correct this as it is not very professional to see the shifting back and forth betweenmenu items.

[Tom]

Hi there,

I’m not too sure what you mean.

Perhaps the shift is being caused by some pages requiring a scroll bar while others don’t?

[Ruud]

Hi Tom,
I have some extra information for you.
I have a site where the homepage is setup as a static page called ‘Home’ and the blog page is called ‘Blog’
All pages are set to content/nosidebar except for the blogpage that is set to content/right sidebar.
The general width of the pages is set to 1140px. The padding of the sidebar is set to 20px all around.
If you go to the homepage and select the blog in the menu the left margin of the content area is shifted to the left. Selecting the homepage makes it shift back to the right place.
Experimenting with the padding section of the sidebar in the customizer I found out that when reducing the padding, around 10px the left margin of the blogpage jumps back in place.
You could try it yourself by creating a blogpage set the global width to 1140px and experiment with the sidebar padding in the customizer.

[Tom]

Here’s what I’m seeing: https://www.screencast.com/t/BSfRIJVd

Perhaps you have a smaller screen, and one the pages has a browser scroll bar while the other doesn’t?

[Ruud]

Hi Tom,

I didn’t noticed that but you are right it has to do with the length of a page and the presence of the scroll bar. That brings me to an other question. Is there a way to make a correction so that the left margin stays in place whether there is a scroll bar or not?

[Ruud]

To respond to my own question there is a simple solution to compensate for the scrollbar. Just put the following code in the extra CSS on the customizer:

html { margin-left: calc(100vw - 100%); }

It is a simple but elegant solution 🙂

[Tom]

Glad you found a solution 🙂

[Author]

Posts