Parallax Content Element Height

To present the content in the Parallax content element in the best way, you can adjust the height of the background image for the parallax scrolling effect.

You can do this using the Minimum element height setting provided by the Parallax content element.

Using the Minimum element height settings, you can specify the Parallax height for desktop computers, tablets and mobile devices.

In case, the height of a column or a row is bigger than the height of Parallax added to it, then you can stretch Parallax to available height of the column. For this purpose, use the option Stretch to available height of the column.

For example, you have several columns in a row and each column contains the Parallax content element of different size. If you enable the option Stretch to available height of the column for each column, the Parallax image will stretch to the available height of the column. In this way, all Parallax images in all columns will be of the same size.

Also, you can set up Minimum row height and Minimum column height using the settings present in the visual designer.

Minimum row height

Minimum column height

These settings define only row and column height. The Minimum row height and Minimum column height settings have no impact on the Parallax content element height.

In this case, if the minimum row height or minimum column height is bigger than the content element height, then the Parallax content element will be shown in the webstore with the spaces at the top, or at the bottom, or on both sides, depending on the selected vertical alignment.

You can define the Parallax height using the Minimum element height settings on the Advanced tab. If you add only an image to the Parallax content element, the Parallax height will be the same as the value set in the Minimum element height settings on the Advanced tab.

Also, the content element height has an impact on the height of the Parallax content element. If you add any additional elements to the image like buttons, texts, the Parallax height will stretch depending on the quantity and size of these elements.

Therefore, you can change the Parallax height for desktop computers, tablets and mobile devices only on the Advanced tab of the content element.

See the scenarios below to check how the Parallax content element is shown on desktop computers, tablets and mobile devices.

Scenario 1

Minimum element height desktop	Minimum element height tablet	Minimum element height mobile
Not set	Not set	Set

Result:

• On desktop computers and tablets the Parallax content element height will be as default height.

• On mobile devices the Parallax content element will be displayed depending on the value set in the Minimum element height mobile field on the Advanced tab.

Scenario 2

Minimum element height desktop	Minimum element height tablet	Minimum element height mobile
Not set	Set	Not set

Result:

• On desktop computers the Parallax content element height will be as default height. By default, the minimum element height is 400px.

• On tablets the Parallax content element will be displayed depending on the value set in the Minimum element height tablet field on the Advanced tab.

• On mobile devices the Parallax content element height will be inherited from the Minimum element height tablet.

Scenario 3

Minimum element height desktop	Minimum element height tablet	Minimum element height mobile
Set	Not set	Not set

Result:

On desktop computers, tablets and mobile devices the Parallax content element will be displayed depending on the value set in the Minimum element height desktop field on the Advanced tab.