CSS incorrectly positioning tours in browser windows >1920px wide

[daveosaurus]

Hi all. I'm setting up a custom site for hosting tours with the WordPress plugin.

I've set up the WP template I'm using so that embedded tours take up the entire window (removing sidebars and other page elements, leaving just the content, and setting the package viewer's width to 100% and height to 100vh)...

So far, so good.

BUT when viewed on desktop, if you make your window wider than 1920px, the tour starts sliding out of view to the right, leaving white space on the left.

Here's a link if anyone is able to test: https://stepinsi.de/demo-tour/

I believe the issue might be a single CSS class in this line:

Code: Select all

<div class="entry-content clear" data-ast-blocks-layout="true" itemprop="text">

...because removing entry-content appears to solve the problem.

But what's causing this behaviour in the CSS? I've looked at the web inspector as much as my brain can handle but I'm not seeing a way to fix it.

Can anyone who knows more about CSS / the web inspector help me?

[daveosaurus]

OK, on further investigation, the #viewport div had a max-width of 1920px set in the CSS via the max-width: var(--wp--custom--ast-content-width-size); rule.

I made a child theme in WP, copied the #viewport's CSS rule, added it to the child theme's CSS and changed to max-width: none;

This seems to have fixed the issue!

Leaving this here in case it helps anyone else in future