Elementor 3.24.X Breaks My Thumbnail Galleries

The automatic update to 3.24.X appears to have broken my thumbnail galleries which I’ve relied on for displaying my photography collections. The elements are not displaying because it has .elementor-invisible class applied.

When viewing the galleries on the Elementor page builder, the galleries display, but the masonry layout is also broken where it will not actually nest the images.

I have some custom CSS in the site appearance, but after commenting them out block by block, I am not having an improvement and rolling back to 3.23.4 completely and immediately restored these galleries.

Based on other advice, I tried ‘Regenerate CSS & Data’ to no effect. I also made a new thumbnail gallery on a test page and disabled all the animations in the options but it still didn’t work.

I am currently running 3.23.4 until I can get the issue fixed, but if somebody has insight and needs to see it back to 3.24.X to verify, I will switch it with notice.

Has anyone else had this problem, dealt with it, or know how to fix it?

My additional CSS for site customization:

.thumbnails-grid-container .gridblock-links-wrap {
display: none;
}
.thumbnails-grid-container .gridblock-background-hover {
background: none !important;
}

/my edit to adjust borders on gallery thumbnails/
.gridblock-columns-wrap {
overflow: visible !important;
}

.gridblock-four .gridblock-element,
.gridblock-three .gridblock-element,
.gridblock-two .gridblock-element {
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 3px !important;
}

/disables animation on loading thumbs in isotope/
.thumbnails-grid-container .gridblock-element {
transition-duration: 0s !important;
}

/animates thumbnail fade-in/
.thumbnails-grid-container.has-effect-zoom .gridblock-grid-element .displayed-image {
-webkit-transition: opacity 2s, transform 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-transition: opacity 2s, transform 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: opacity 2s, transform 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.thumbnails-grid-container.has-effect-zoom .gridblock-grid-element .displayed-image.lazyload {
opacity: 0;
}
.thumbnails-grid-container.has-effect-zoom .gridblock-grid-element .displayed-image.lazyloaded {
opacity: 1;
}

/lightbox text modification/
.lightbox-text {
font-family: 'Thasadith' !important;
font-weight: 500 important;
}

/lightbox background modification/
.mtheme-lightbox.lg-outer {
background-color: #000000 !important;
}

.lg-backdrop {
background-color: #000000 !important;
}

/disable shadows on menu boxes/
.homemenu ul ul {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

/reduce submenu box sizes and remove colored bar at bottom/
.homemenu ul ul li:last-child {
padding-bottom: 0px !important;
}

.homemenu ul ul li:first-child {
padding-top: 0px !important;
}

.homemenu ul ul {
border-bottom: none !important;
}

.homemenu .sf-menu li:hover ul,
.homemenu .sf-menu li.sfHover ul {
left: 0;
top: 50px !important;
}

.homemenu ul li a::before {
border-top-color: #fff;
}
::selection {
color: #fff;
background: #111;
}
::selection {
color: #fff;
background: #111;
}
element {
}
.homemenu .sf-menu a, .homemenu .sf-menu, .homemenu .sf-menu .mega-item .children-depth-0 h6, .homemenu .sf-menu li.menu-item a {
font-family: "Thasadith";
}
.homemenu .sf-menu li.menu-item a {
position: relative;
}
.homemenu ul ul li a:last-child {
padding-right: 0;
}
.homemenu .sf-menu ul li a {
padding: 4px 0px !important;
}

.homemenu ul ul li a {
color: rgb(255, 255, 255, .75);
}

/site title font size/
.header-site-title-section a {
font-size: 26px;
}

• This topic was modified 1 month, 2 weeks ago by kerrath.

The page I need help with: [log in to see the link]