with your custom class: av-gallery-sticky-scroll
/* 1. GLOBAL STICKY PERMISSION
Ensures parent elements do not block the sticky effect by overriding overflow hidden */
html.html_stretched,
html.html_stretched body#top,
#top #wrap_all,
#top #main {
overflow: visible !important;
}
@media only screen and (min-width: 768px) {
/* 2. MAIN CONTAINER
Using display: block to ensure the image has vertical room to slide within the container */
#top .avia-gallery.av-gallery-sticky-scroll {
display: block !important;
overflow: visible !important;
position: relative !important;
clear: both !important;
width: 100% !important;
}
/* 3. STICKY WRAPPER (Large image housing)
Enforces dynamic height and sticky positioning */
#top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big-wrapper {
position: -webkit-sticky !important;
position: sticky !important;
top: 70px !important;
padding-top: 30px;
z-index: 100 !important;
/* Dynamic height adjustment */
height: auto !important;
min-height: 200px;
background: #ffffff !important;
margin-bottom: 30px !important;
/* Smooth transition for height changes on thumbnail hover */
transition: all 0.3s ease-in-out;
float: none !important;
}
/* 4. IMAGE ELEMENT
Neutralizes Enfold's absolute positioning so the wrapper adapts to the natural image height */
#top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big {
position: relative !important;
display: block !important;
height: auto !important;
width: 100% !important;
}
#top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big img {
display: block !important;
position: relative !important;
height: auto !important;
width: 100% !important;
max-height: 75vh; /* Prevents tall images from exceeding the viewport height */
object-fit: contain;
}
/* 5. THUMBNAILS (Scrolling area) Thumbnails remain in the normal document flow and scroll underneath the sticky image */
#top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-thumb {
position: relative !important;
z-index: 10 !important;
float: none !important;
width: 100% !important;
padding: 0 !important;
}
}with your custom class: av-gallery-sticky-scroll
and to have both on one site – an additional custom class : besides
/* 1. GLOBAL STICKY PERMISSION
Ensures parent elements do not block the sticky effect by overriding overflow hidden */
html.html_stretched,
html.html_stretched body#top,
#top #wrap_all,
#top #main {
overflow: visible !important;
}
@media only screen and (min-width: 768px) {
/* 2. MAIN CONTAINER
We use CSS Grid for the 65% / 1fr split */
#top .avia-gallery.av-gallery-sticky-scroll.besides {
display: grid !important;
grid-template-columns: 65% 1fr !important;
gap: 30px !important;
align-items: start !important; /* Crucial: prevents big-wrapper from stretching to full height */
overflow: visible !important;
position: relative !important;
width: 100% !important;
}
/* 3. STICKY WRAPPER (Left Column) */
#top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-big-wrapper {
grid-column: 1 !important;
position: -webkit-sticky !important;
position: sticky !important;
top: 100px !important; /* Adjust based on your header height */
z-index: 100 !important;
height: auto !important;
margin: 0 !important;
background: #ffffff !important;
}
/* 4. IMAGE ELEMENT */
#top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-big {
position: relative !important;
display: block !important;
height: auto !important;
}
#top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-big img {
display: block !important;
width: 100% !important;
height: auto !important;
max-height: 80vh;
object-fit: contain;
}
/* 5. THUMBNAILS (Right Column) - ruled here by grid-layout */
#top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-thumb {
position: relative !important;
z-index: 10 !important;
padding: 0 !important;
width: 100% !important;
min-height: 100vh;
display: grid !important;
align-content: start;
grid-auto-flow: row;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
}
#top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-thumb a {
width: unset !important;
}
}
/* 5a. THUMBNAILS (Right Column) - f.e. for iPad */
@media only screen and (min-width: 768px) and (orientation: portrait) {
#top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-thumb {
grid-template-columns: repeat(2, 1fr);
}
}