How can I make the live preview sticky?

The app can show a sticky overlay of the live preview to make sure the configured options can always be seen live on the preview. 

You can enable sticky preview on the Settings tab:

Desktop

On desktop the preview will be sticky next to the options. The preview is visible while scrolling for the duration of the height of the options (Shown in green). If the height of the options is less then the height of the preview, then the sticky preview has no effect.

Mobile

On mobile you can choose from different sticky positions:

Overlay

The overlay position will show a full overlay at the top. The overlay is shown before the preview is not fully visible.

Right/Left

The right/left position is shown when the preview is not fully visible anymore. 

CSS

The different mobile sticky positions styles can be targeted with the following CSS: (make sure to add the CSS to your global stylesheet and not in the options Display settings)

.cl-po--preview-sticky.mobile.overlay {
    background: black; /* black backgroubd */ 
}

.cl-po--preview-sticky.mobile.left  {
    left: 20px !important; /* more space from left  */ 
}
.cl-po--preview-sticky.mobile.right  {
    padding-top: 50vh !important;  /* more space from top  */ 
}

The top property should not be changed as the app dynamically updates this property to show/hide the sticky preview.  Instead you can use padding to move the sticky preview location on the screen. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.