'Position: Sticky theme/plugin conflict

Very very beginner here and trying to learn as I encounter problems.. please help!

I am using a plugin that has a container that is meant to be sticky but there is a conflict with the theme I am using (when I activate twenty-twenty, the sticky container works).

While js/jq/html etc are super foreign to me, I do know how to add Custom CSS to my Wordpress site so I am hoping someone can help me solve this problem by providing CSS that I can add.

I have tried to override any potential parent/grandparent overflow issues by assigning my specific page with body overflow: visible. This is the custom CSS I tried:

.page-id-3489 body {
    overflow: visible; !important;
}

I have also tried adding this code (I am not sure if I am using the right 'identifier')

 .VPC_Modern_Skin #vpc-preview-wrap {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    align-self: flex-start; 
 }

Here is a screenshot 1 of the 'inspect elements' of the container that won't stick.

The id of the container is called vpc-preview-wrap

The class of it says: o-col xl-2-3 lg-2-3 md-1-1 sm-1-1

The parent (not sure if using right word?) for this class and id is

class: o-wrap VPC_Modern_Skin modern-sticky

id: vpc-container

Any input would be appreciated. Thank you!!!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source