Fancybox Background Shift

[wnhorne246]

I’m having an issue with the background shifting when opening Essential Grid’s “Fancybox” (at lease I think it’s fancybox–v3?) that they use. They might have changed–not sure. I had this fixed at one time, but things must have changed. You can see my issue HERE. It’s the bookshelf and is the only thing on the page. Every time the lightbox opens, the background shifts left (the same distance the hidden scroll bar would be, is my guess). When you close it out, it shifts right again.

I think it have something to do with the following classes, but I have no idea how to fix it.

.esgbox-container
.esgbox-is-open
.esgbox-can-swipe

As always, thanks for your help.

[ruenel]

Hello @wnhorne246,

Thanks for writing in! I have checked your site and I could not replicate the issue. I am not seeing a shift in the background image.

The issue could also be caused by a plugin conflict, amongst other things. Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):

Testing for Plugin Conflict
Child Theme
Disabling Cache
Disabling CDN

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[wnhorne246]

Respectfully, there is not a conflict. If you look at the bookshelf, while you open a lightbox, the entire background (bookshelf and all), shifts to the left about 5px to 10px. When you close the lightbox, it shifts back. I’m not talking about the iframe that pops up. I’m talking about the background.

I’ve seen this in every browser, with every plugin, except Essential Grid, deactivated. I’ve even deactivated X-Pro theme to make sure there was no conflict there.

This was an issue a few years back and the solution was this…

.esgbox-lock .esgbox-overlay {
overflow-y: hidden !important;
}
.esgbox-margin {
margin-right: 0 !important;
}

That was given to me 5 years ago with THIS thread. Unfortunately, things have updated and it no longer works.

It does not happen on mobile as there’s no scroll bar to lock.

Let me know if you’d like a login to the site and I’ll provide it.

[christian]

Hey @wnhorne246,

There is a left margin added when the lightbox is activated. It’s coming from Essential Grid itself and it looks like it has some purpose but for your case, it shifts the content. Add the following code in Theme Options > CSS.

.compensate-for-scrollbar{margin-right:0 !important;}

Hope that helps.

[wnhorne246]

Yerp, that did it. I’m not sure what kind of purpose that would have? Curious as to the class name, too! Why should there be anything to compensate for? LOL.

Thanks Christian.

[christian]

Hey @wnhorne246,

I’m sorry but I have not idea right now. But, it’s just coming from the Essential Grid plugin.