Skip to main content
All CollectionsCustomizing Experiences App to your theme
Sticky side-column theme customization
Sticky side-column theme customization

If you'd like your booking widget to scroll with the content on your page, use this theme customization tutorial.

Updated over a week ago

Sticky Side Column

In certain situations, you may find that the content on your experience's product page exceeds the side column that contains the booking widget. This can cause an unsightly blank space on your webpage.

A remedy is to make the booking widget scroll with the content in the page. Here's how to do that.

  1. Add the following style block below the CSS imports that we mentioned above.

<link href="https://dev.experiencesapp.services/themes/default.css" rel="stylesheet" />
<link href="https://dev.experiencesapp.services/embedded.css" rel="stylesheet" />

/* Sticky Column */
<style>
@media only screen and (min-width: 800px) {
.product__display-grid-sticky {
display: flex;
align-items: flex-start;
}

.product__display-grid-sticky .product__display-grid__col1 {
position: -webkit-sticky;
position: sticky;
top: 3.125em;
width: 100%;
}
}
</style>

2. Move the HTML element with the product__display-grid__col1 class into a new "sticky" positioned div .
Here's the general layout of the original HTML structure:

  <div class="product__display-grid">
<div class="product__display-grid__col1">
...
</div>
<div class="product__display-grid__col2">
...
</div>
...
</div>

Here's what it would look like with the sticky positioned column:

  <div class="product__display-grid">
<div class="product__display-grid-sticky">
<div class="product__display-grid__col1">
...
</div>
</div>
<div class="product__display-grid__col2">
...
</div>
...
</div>

Sticky column:

Did this answer your question?