Parallax white empty spaces

[siquenique]

Hi, I have an issues with parallax , when I resize the browser to a smaller size it includes white spaces between the sections making the parallax to go from section to section and goes section , white space, section , white space.

It works with a defined size of the browser.

[friech]

Hi @siquenique,

Thank you for writing in, you have multiple sites on your account and some requires authentication, please provide us the site URL and login credentials in a secure note so we can take a closer look.

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

In the meantime, please do the following:

• Ensure that you are fully up to date. WordPress, Theme, and Cornerstone (Version Compatibility)

• Clear all the site caches (plugin, server-side, CDN, and browser’s cache) so that the code from the latest release is always in use. This will help you to avoid any potential errors. Please deactivate this caching features while we tackle this issue.

• Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Cheers!

[christian]

Hey @siquenique,

Please take a look at the screenshot below. Are you referring to the white space in the middle?

What you’re seeing in the section’s base background that is at the back of the Background Image. You’re seeing that because, you’ve added a min-height of 700 to your sections and set your Background Image Size to 100% and the aspect ratio of the image does not match the aspect ratio of the section.

To cover the section with the background image, Set the Background Size to cover.

Hope that helps.

[siquenique]

Hi Christian, not really, the issue is in a webbrowser if I make the browser very small than I get big white spaces. I can try what you mention but not sure that is the case.

[siquenique]

Doesn’t work properly at all with cover

[rad]

Hi @siquenique,

It’s because it’s still in 700px height regardless of device view. Please check these images to explain it.

This is contain, which means the image should be contained in FULL VIEW, hence, the gap is unavoidable since there is a difference between image height and 700px.

And this is cover, which means to cover the entire container including spaces, hence clipping the image.

And this is 100% width and 100% height, stretching it up to 700px.

Is that what you’re trying to achieve? Stretching it?

It’s unavoidable since you’re fixing your section height to 700px while the width changes. And there is no fix to it unless you remove the 700px. Again, there will still spaces or clipping since the content still defines the height, and that height depends on the amount of the content.

Another option is not using the section background, instead, use the revolution slider with the responsive setting. That should respect the correct aspect ratio of the image per device view.

Thanks!

[siquenique]

Ok , thanks.

What I am trying to achieve is to have three images with the parallax effect and the images to be full in the page.

Will give a try to the slider than

[rad]

Hi @siquenique,

Yes, the full page background is not really possible since the devices have many different sizes. Please note the revolution slider’s full-screen setup has the same result too, so you may want to size it per device. Please check this https://www.themepunch.com/slider-revolution/responsive-settings/ and https://www.themepunch.com/slider-revolution/module-layout/#breakpoints, https://www.themepunch.com/slider-revolution/responsive-setup/

That way, you can size you layers per device, or perhaps hide layers per device and display another image that is applicable for that specific device size.

Thanks!