mh don't know. on chrome it looks good

@peterroden said in I want to create a thumbail grid but with images and not projects: I like the hoverimage effect on the project thumbnails where it scales up a bit on hover. How do I add that to the element grid? that is just for the project thumbnails. you'd need to do a transform: scale(1.1); transition for example I have added a border to the grid elements using CSS however this seems to have broken the grid columns. You can see that if there is not a multiple of 3, the last image in the grid scales across all 3 columns instead of keeping the same size. https://leightonspace.co.uk/brainmarrow/test/ maybe try a 1px box shadow instead of a border also the padding you added makes the boxes bigger than they're supposed to be so they dont fit in you added this css. and it makes the elements get too big because you use flexbox i think: .element-wrap { border-width: 1px 1px 0px 1px; border-style: solid; border-color: #2C56A2; padding-left: 16px; padding-right: 16px; padding-top: 16px; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: column; -webkit-box-direction: column; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; } best to dabble around with the css and learn about flexbox The element grid is not scaling in the same way responsively as the thumbnail grid. for me it does scale I cannot get my text animation on the artist name hoverstate to work. On the project thumbnail version I have a cool hoverstate animation that changes the font. I cant get that to work on the element grid. you probably need to target the parent container like .element-wrap:hover .caption{ } instead of .caption:hover{ }

do this instead: body.type-lay_news .mobile-title, body.type-lay_news .navbar, body.type-lay_news .burger { display: none !important; } body.type-lay_news{ padding-top: 0; }

i disabled it very hard :D so u cant

jQuery(window).scroll(function() { // check if scroll event happened if( window.innerWidth > 700 ) { if (window.scrollY > 50) { // check if user scrolled more than 50 from top of the browser window jQuery(".navbar").css("background-color", "rgba(255, 255, 255, 0.4)"); // if yes, then change the color of class "navbar" to white (#ffffff) and 0.4 opacity // jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff) jQuery(".navbar").css("backdrop-filter", "blur(5px)"); // if yes, then change the blur to 5px } else { jQuery(".navbar").css("background-color", "rgba(255, 255, 255, 1); jQuery(".navbar").css("backdrop-filter", "blur(0px)"); // if yes, then change the blur to 0px } } });

oh u can only use the project index element for a list of projects. not for a list of any texts :/

@victor789 How did you fix/manage your issue in the end? would be nice to know :)

@alasdair17 hey, nice. i going to try this it out. and thanks for the hint to backup before ^^

@arminunruh that would be a nice feature. e.g. on my site is the site title very big and when i scroll a tiny bit up the title appears and covers the photos. alex-fritsch-fotografie.de

Have you tried akismet plugin?

@arminunruh thank you! guess css even better and faster

@arminunruh its not solved but its fine like it is currently wir wollten gerne das einhorn auch auf den projektthumbnails im image slider haben. das ist aber nur das handsymbol. das lassen wir aber jetzt bis auf weiteres so best, alex

yea lazyloading in firefox created some bugs for firefox, so i disabled it for firefox

i dont see a contact button!

sure! basically do body.slug-xxx .navbar{ display: none!important; } go to chrome browser, right click the website and click "inspect element" or: https://developer.chrome.com/docs/devtools/open/ then in the body tag find the slug-xx class: [image: 1684605980195-screenshot-2023-05-20-at-20.06.02.png] here it is slug-frontpage so the css would be: body.slug-frontpage .navbar{ display: none!important; } this is described here: https://laytheme.com/documentation/custom-css-styling.html#css-based-on-current-page

that project will be the project that is shown first when you enter the website i added this to the tutorial now: [image: 1684603402748-screenshot-2023-05-20-at-19.23.18-resized.png]

noo :/ theres no feature like that

very nice !! <3