With two parallax sections on one page - one does not display height correctly

[scervera]

I have a website I’m building with Pro located at https://staging.mensdiscipleshipnetwork.com
The page has a number of sections. Two of those sections have an image applied as a lower layer with a parallax effect. I have provided some custom css to each as follows:

$el {
  background-position: 50% 210px !important;
  height: 350px;
  background-size: 100%;
}

When I had only one section like this on the page it worked fine. However, when I add a second on the page, the first one has it’s height dramatically compressed and too narrow for my purposes. I would appreciate any help you can provide me to fix this.

Thx

[ruenel]

Hello Stephen,

Thanks for writing in!

Where have you inserted the css code? Please be advised that you will have to insert it in the Customize tab of the section settings and you need to use this code instead:

$el {
  height: 350px;
}

$el .x-bg .x-bg-layer-lower-image {
  background-position: 50% 210px !important;
  background-size: 100%;
}

Hope this helps. Kindly let us know.

[scervera]

Thank you! While I had been putting my CSS in the correct location, the code did not work as desired. The code that you provided worked perfectly! Thank you for the assistance. I’m all good now.

[ruenel]

You’re welcome!
We’re glad we were able to help you out.