Unwanted white space on a specific page

Hello there!

The following code is what’s causing those lines to appear:

.elementor-21 .elementor-element.elementor-element-def75ca > .elementor-widget-container {
    border-style: solid;
    border-width: 0px 0px 0px 1px;
}

.elementor-21 .elementor-element.elementor-element-52272e2 > .elementor-widget-container {
    border-style: solid;
    border-width: 0px 0px 0px 1px;
}

Those are the white lines that separate, “????? ??”? ????? ?????”, “????? BDI ?????”, and “????? ????? ?????” on your homepage when in a desktop/laptop browser. The widget container for these has been set with a left solid border width of 1px. The height matches the height of the text automatically. These whites lines only appear on the homepage, which explains why it doesn’t happen anywhere else on your site.

On mobile, those white lines still appear. As those there is not enough space on a mobile screen to fit those three texts, they move onto the next line. This happens after the width of the browser goes below 740px.

One way to correct this is to add a custom CSS code like this to your site, which will remove those borders (white lines) after the browser width goes below 768px (Elemenor’s default breakpoint for mobile devices):

@media (max-width: 768px) { 
	.elementor-21 .elementor-element.elementor-element-def75ca > .elementor-widget-container, .elementor-21 .elementor-element.elementor-element-52272e2 > .elementor-widget-container {
		border: none;
	}
}

Removing those white lines on mobile devices should also fix the menu issue that you described.

Please let me know if this helps or if you have any further questions!

p.s. I almost never see websites in Hebrew. The text looks so cool!

Hey Niall, thank you for the quick reply.

I have tried your solution but unfortunately it did not fix the issue.. I’m afraid I didn’t explain the issue properly as I am not sure we were talking about the same thing – I have added two images, 1 represents what you were talking about, I assume? and 2 shows the white space that is bothering me..
Also I believe I had the issue before I added those three pieces of text you mentioned, the only thing I can tell for sure is it only happens on the main page, and I noticed some other websites built on WordPress who also have the same issue, the width of the white gap varies but the it basically looks like the same issue

I just noticed there is no option to upload images here so I am just leaving a link to imgur, hope that’s ok :

first image : https://imgur.com/09Dof0D
second image : https://imgur.com/IcUhm6n ( if you attempt to scroll to the left on smaller screens this is the white space that shows up )

Hey beerusiv!

Yes, I misunderstood you. Sorry! Your images helped me understand the problem.

I checked and tested a few things before realizing that the content is pushed all the way to the right like in this picture:

As it only happens on the homepage, there must be some CSS code that’s causing it. You’d need to troubleshoot the CSS to find exactly what’s causing it. I thought it was the background images. Removing them doesn’t fix the issue.

So I wrote this code, which you can copy/paste inside the WordPress Admin Dashboard > Appearance > Customize > Additional CSS:

/* Remove extra whitespace on the home page */
.home .elementor-21 {
    overflow: hidden;
}

.home .elementor-inner {
    left: -3px;
}

That should fix the issue, as far as I can tell:

Could you please add that CSS code to your site and let me know if it fixes your problem?