Hi Tes,

We took a look at the page and there isn't any code that is causing the white space at the top or right border to disappear. Might just be a structural thing.

Can we have the screenshot so that we can compare and try to get it to where it was.

Thanks.

Hey Again,

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

@media only screen and (min-width: 1000px) {
    .nectar-sticky-column-css.vc_column_container > .n-sticky > .vc_column-inner {
        transform: translateY(-50px);
    }
}

Thanks

Hello Tes,

Please try this css:

#review {
    margin-bottom: 22px !important;
    top: 26px;
}

Thanks.

Hey Again,

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

@media only screen and (min-width: 1000px) {
    .nectar-sticky-column-css.vc_column_container > .n-sticky > .vc_column-inner {
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        -o-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

Thanks

This should likely have to be changed

-webkit-transform: translateY(-80px);

Thanks 

This should help: https://stackoverflow.com/questions/9328832/how-to-apply-specific-css-rules-to-chrome-only. 

 Thanks

Hey Again,

Sorry for the late turn around, we can get overwhelmed sometimes by the number of tickets. 

Try using this CSS instead:

@media only screen and (min-width: 1000px) {
    .nectar-sticky-column-css.vc_column_container > .n-sticky > .vc_column-inner >.wpb_wrapper {
        top: -40px !important;
        position: relative;
    }
}

Best 

Also remove the one provided earlier.

Thanks 

Hey Again,

Could you confirm both resolutions on Chrome and Safari are the same as i doubt this is due to the varying screen size and not browser specific.

Thanks 

Escalating this to the developer for actual device testing.

Thanks 

Hey Tes,

I haven't been able to see that Safari-specific issue yet on my end after testing on two different versions of the browser: https://www.dropbox.com/s/16s7yunrn8zuv2i/Screen%20Recording%202022-06-08%20at%2011.56.07%20AM.mov?dl=0

Can you verify that it's not related to being logged in as an admin?

Kind regards,

It sounds like you might be referring to the over-scroll or "scroll bounce" effect, which is a native feature of Safari on scrollable elements that can't be disabled with CSS alone, unfortunately. The sticky column can be contained to the same level as the right-hand chat window by adding the following CSS snippet though:

.popmake-content .n-sticky {
 contain: paint;
}

Hey Tes, yes that's the "overscroll" effect. If you'd like to make the effect more seamless with your design, the "reviews" toolbar would need to be moved into the scrollable area instead of sitting above it so that when the overscroll occurs, the bar moves along with the scrollable area.

Hey Tes, the overscroll should be visible in both on the body (on Mac OS when using a trackpad), but it looks like Safari also enables it for child divs set to overflow: scroll.

I'm not able to see that spacing difference between Safari/Chrome on my end yet. Can you also verify that it's unrelated to being logged in with the admin toolbar?

Kind regards,