Popup interferes with screen width

Hi there,

you can try switching the Customizer > General >> Structure to Flexbox.

Or if that option is not good for your layout then try adding this CSS:

html {
  box-sizing: border-box;
}

*, ::after, ::before {
  box-sizing: inherit;
}

Hi David
Both suggestions does not make a difference.

The plugin is adding some CSS to ALL Hidden Aria elements on the page – i have no idea why but you can try adding this CSS to stop that:

html.pum-open.pum-open-overlay.pum-open-scrollable body>[aria-hidden] {
  padding-right: 0 !important;
}

Works better.
But still, the screen moves.

How and were can you see that the plugin is adding som CSS to ALL hidden aria elements on the page?

Can you add both the CSS rules i provided.
In the Browser Developers tools – you can inspect the elements to see what is being applied and from where it comes from if the CSS is not combined/cached. But the classnames used in the CSS points to where it comes from.

I included both CSS rules
I am not technical enough to understand the Browser Dev tool. Please take a look at it yourself.

I just tested your site on all my devices – and i cannot see the width issue.

That is because of your two pieces of css. Without them the plugin causes the problem.

So is this issue resolved ?

The best would be that the plugin and theme don’t bite each other without addidional css code. The people of the plugin are going to have a good look at it. So let’s keep this issue open till they come back to me.

I’ll be in touch.

It really is down to the Plugin Developer to ensure there CSS is specific to there requirements.

The code i provided here is automatically added to GP if you use the Flexbox structure. This eliminates any issues where content has both width and horizontal padding style. It is quite common that plugin developers add styles like this but don’t include the box-sizing property to stop the element overflowing.

Whereas this CSS is directly related to the Plugin adding some CSS to all hidden aria elements when the modal is open. I am not sure why thats there, maybe the developer has a good explanation for it, but if they need it for their plugins code then it needs to be more specific.

.pum-open-overlay.pum-open-scrollable {
margin-right: 17px;
position: relative;
}

html.pum-open.pum-open-overlay.pum-open-scrollable body>[aria-hidden] {
padding-right: inherit;
}

did the trick

Glad to hear that.