Page shifts to the left on load

  • Resolved lentomas

    (@lentomas)


    4 weeks ago

    Been having a problem now for over a week with templates and pages shifting. I started out using the elementor wireframe1 template and changed things around design wise. Then discovered a problem with pages with lots of text therein and posts using the card skin on the post widget.

    Having searched for solutions I have tried everything that people suggest from clearing the cache disabling plugins etc. In total frustration I have built a bare minimum set of templates with flexboxes using the Hello theme, I have a child theme as well. No changes have been made to the theme, I need a boxed layout and it is set at the default 1140 and straight out of the template css background colour styles. Using the basic wordpress menu system with no mods or changes.

    I have built 3 pages. single Post page1 page 2 page –

    Pages 1 and 2 are identical the way they are built, apart from the actual content same page settings. A flexbox container set to boxed plus a text editor widget. There is no additional css, java or changes.

    The single post displays ok along with page1 (with minimal content)

    Page 2 however on page load shifts about 10-20 pixels to the left this page has about 20 plus lines of text in a text editor widget. If I delete half the rows of text it works ok.

    I note that on the simple header when displayed in theme builder, that on the far left of the Page it says Content Area not sure if this is part of the cause of the problem. I have put the site on a temporary development site but I can confirm that I have tried the site on the live domain. The pages do flicker / FOUC and I have not applied any fixes to correct this as I wanted to track down the actual cause and not apply any fixes whatsoever.

    If there is anyone who can help me I really would appreciate it.

    Many thanks in anticipation of a simple fix.

    • This topic was modified 3 weeks, 5 days ago by bcworkz. Reason: Fixed typo in title that resulted in a bad word

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • threadi

    (@threadi)

    I suspect you are confused by the fact that page 2 is further to the left on the screen than the other, shorter pages. The reason for this is the scroll bar that is displayed by the browser due to the length of the text. If you also show the scroll bar on pages without this long length, the view no longer wobbles back and forth when you call up page 1 and 2 one after the other.

    The solution is found with one line of CSS:

    html { overflow-y: scroll }

    You should insert this under Appearance > Customizer > Additional CSS.

    Thread Starter lentomas

    (@lentomas)

    What a superstar thank you that fix worked. I am so grateful for your quick and effective response. Its been driving me mad.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.