In a parallax design, the background image of the parallax area is stretched to cover the whole browser area, so that as the parallax window is scrolled vertically, it is entirely filled with content from the image.
As a result, when the browser ratio differs from the image ratio, some cropping will occur (vertically or horizontally). If using an image with a landscape ratio, when viewed on a portrait ratio screen, this will result in a lot of cropping.

In order to minimize the cropping when viewing the site on a browser with a landscape ratio (most desktop), versus a portrait ratio (mobile devices in portrait orientation), we can specify a different Parallax background image to be used for portrait ratio situation.

The solution will depend on which method you used to create your parallax sections

If using Posts

For each parallax post, do the following:

• Place the URL of the image with a landscape ratio in the Desktop BG Image box of the parallax post.
• Add the rule below in the Per Post Style box (dont forget the + at the beginning of the rule)

[email protected] screen and (orientation:portrait) {
.parallax#post-xxx-p {background-image:url(PortraitImageUrl) !important;}
}

Replacing xxx by the post ID number, and PortraitImageUrl  by the URL of the image with a portrait ratio.

When the browser (desktop or mobile) will have a portrait ratio the default landscape image will automatically change to the portrait image.
It will not stop some cropping to occur, but it will considerably reduce it.

 

If using the Parallax shortcode

Make sure you use the class option in the parallax shortcode with a different name for each block like below
[parallax class=‘mypar1’ …]xxx[/parallax]

Then change the rule to the one below, using the class name, and put the rule in the Per Page style box of the page that has the parallax shortcodes

[email protected] screen and (orientation:portrait) {
.parallax-base.mypar1 {background-image:url(PortraitImageUrl) !important;}
}

If you are doing that for several parallax blocks, you can put all the rules in the same @media rule

[email protected] screen and (orientation:portrait) {
.parallax-base.mypar1 {background-image:url(PortraitImageUrl) !important;}
.parallax-base.mypar2 {background-image:url(PortraitImageUrl) !important;}
}