Gap on the sides of full-width sections when zooming in

Hey guys,

I noticed that on my installation, there are gaps that appear on both sides of full-width sections when zooming the page in on desktop (see attachment) – in all browsers – Chrome, Edge, Firefox, Safari and even IE. It looks fine on 100% or when zooming out.

This gap is not there on your demos, but I am using Elementor (and I think your demos are on WPBakery PB)

I’ve set a staging website that you can see in the private content area and view this live (because I otherwise developing the website locally). I’ve removed all custom CSS, disabled all custom snippets and activated the non-child theme (verson 6.2.0) to remove all child-theme related customizations, but this didn’t make any difference – the problem is still there. I’d appreaciate it if you could point me in the right direction, because I am not able to troubleshoot this using DevTools…

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

I am sorry but this is not the standard way of testing the site, every Theme in the world uses certain breakpoints to change the layout as per the screen resolution, and Woodmart also based on that theory, Woodmart uses the Bootstrap framework which works on certain predefined rules for the different layouts on different screen resolutions, like for Desktop ( start from 1025px), For Tablets ( from 992px to 1024px) For Mobile. ( end till 1023px) these are the standard points.

So if you test the site like you are doing simply resizing/zooming the browser then on a certain point/screen resolution it must break the layout.

You must have to test your site on real devices OR on the online simulator like Responsinator.

Best Regards

Hi, I don’t think you understood my issue correctly. I am testing the site on real devices (Windows and macOS) and different browsers. The problem occurs only on desktop browsers when zooming-in. The problem is missing on your demo pages, but then again – they are made with WPBakery Page Builder and I am using Elementor (so maybe there is a difference). The gap to the left and right of certain full-width elements is clearly visible on the pages I linked in the private area and could be tested in any desktop browser, on any operating system. This is not a breakpoint issue – the layout breaks properly and as expected at the set widths.

Also, I am not using Porto, but Woodmart.

Hello,

Sorry for the mistyping. I have corrected my previous message.

This issue is caused by WebKit browser rendering, and it can’t be completely fixed.

Please try adding the following Custom CSS in the Global Custom CSS area to fix the issue.

But some row shifting will still occur in some situations.

@media (min-width: 1025px) {
		.platform-Windows .website-wrapper [class*="wd-section-stretch"] {
		width: 100vw;
		left: calc(50% - 50vw);
	}
}

Best Regards

Thanks, it looks much better now – there is still a 1px on both sides, but it’s not really that noticable. Certainly better than before.

Is this an issue of Elementor vs WPBakery Page Builder? Because your demos don’t have that problem.

Hello,

This issue is with Elementor Page builder. Our demos use Wp-Bakery Page builder that’s why the issue doesn’t exist.

Best Regards.

[Author]

Posts