ajax bug css loading and thumbnail order

[romeo19]

Hello,
i have this weird bug when i navigate from the frontpage (category-page) to a certain project and then go from there to a different category-page all my css and the ordering of the thumbnail-grid is gone. Only on reloading the page all the styles get applied and the order is also right. I replicated this bug on different browsers (firefox and chrome) and it also disappears when i disable the ajax functionality.
Is there a way to keep ajax functionality?
The site is currently setup at: katjadavar.michaelhengl.de

[arminunruh]

whats your custom css? can u post it here

[romeo19]

Hey Armin, thanks for the message, here you go:

General CSS:
:root{
--color-black: #1b1b1b;
--color-white: #fffafa;
--color-green: #00d338;
}

.lay-sticky{
top: 80px!important;
}

#CV {
padding-top: 220px;
}

.archive .ph, .home .ph{
height:32vw;
padding-bottom: 0!important;
}

p{
color:var(--color-black)!important;
}

strong{
font-weight:500;
}

.category-1 h1, .category-2 h1, .page-template-default h1{
font-family: 'AktivGrotesk', sans-serif;
color: var(--color-black)!important;
line-height: 1.2!important;
font-weight: 400!important;
}

._H1{
font-weight: 400!important;
}

.col .thumb img {
transition: transform 400ms ease-out, opacity 800ms ease-out;
will-change: opacity;
object-fit: cover;
transform: scale(1.75);
}

body.thumb-mo-image-has-transition .thumb.has-mouseover-img img.mo_thumb {
opacity: 0 !important;
transform: scale(1);
}

nav.mobile-nav{
z-index:99!important;
}

.navbar {
border-bottom-style: dashed;
border-bottom-width: 1px;
}

.project-arrow {
z-index: 98;
}

.project-arrow.pa-prev {
left: auto;
right: 65px;
}

MOBILE
.archive .ph, .home .ph {
height: 60vh;
padding-bottom: 0;
}

.burger-default.active span::after{
background-color: var(--color-black);
}

.burger-default.active span::before {
background-color: var(--color-black);
}

nav.mobile-nav li.current-menu-item > a, nav.mobile-nav li.current_page_item > a {
background-color: transparent;
}

.lay-mobile-icons-wrap {
z-index: 99;
top: 0;
right: 0;
vertical-align: top;
}

.project-arrow{
width: 10px;
top: 62px!important;
}

.project-arrow.pa-next{
left:55%!important;
}

.project-arrow.pa-prev {
left: 45%!important;
}

[arminunruh]

yea

dont use
.page-template-default
or .archive or maybe .home not either

only use these selectors:
type-page
id-352
slug-frontpage
category-*

or turn on compatibility mode in lay options

[romeo19]

Thanks a lot - that helped!