Hello Mickel,

I see, let me escalate this to our web designer.

Hello,

I've noticed that Elementor is overwriting the image styles. In this case, please add the following additional CSS:

.has-parallax-content > img {
  height: 100% !important;
}

Adding this CSS should help you maintain the desired image styles despite Elementor's interference.

Best regards

Hello,

Our shortcode for parallax images uses full-screen height on various viewport devices. This is because the image sizes may vary in load time, and the JavaScript is executed first, needing to calculate the translation proportions accurately; otherwise, it may cause unpredictable jumping. To address this for mobile devices, you can define an additional class for landscape images and set a specific height as needed. Auto height won't work due to the JavaScript involved in the parallax effect. Here's how you can create a new class with various heights:

Please add the following additional CSS:

@media only screen and (max-width: 1024px) {
.half-height figure.has-parallax {
    height: 70vh!important;
}
}

@media only screen and (max-width: 767px) {
.half-height figure.has-parallax {
    height: 60vh!important;
}
}

@media only screen and (max-width: 479px) {
.half-height figure.has-parallax {
    height: 50vh!important;
}
}

Please keep in mind that the images translate from top to bottom by 20% of their height. In this case, we recommend using square images to ensure the best appearance without revealing the background of the parallax div container.

PS: I've created a new set of parallax images on your example page using the new class and styles.

If you have any further questions or need assistance, please don't hesitate to ask.

Best regards