bhua_2022

<!-- Container for the splash screen with a specified ID --> <div class="splash-wrapper" id="loader-container"> <img src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/65f9bcbd71c39d12a15aae94/1710865597709/BurtonHamfelt+-+Logo+-+2024+-+white.png"/> </div> <style> div#loader-container img { max-width:150px; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; animation-duration: .65s; animation-delay: 1s; top: 0; } @keyframes slideOut { from { margin-top: 0vw; } to { margin-top: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 150px; } @keyframes slideOut { from { margin-top: 0vw; } to { margin-top: -600vw; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> ////////////// the image I would like to switch with a 2second video in the end. This code works perfectly, only does it show up every time you're redirected to the indexpage, which is often. I would like to alter the code so that it pop-ups only once when you enter the site for the first time.

As a further question to this code: Would it be possible to attach this code to the index-page and be visible only once, when you first open the page and then not again anymore, until you revisit the site again. We refer back to the index page every sub-page, but now that action happens every time you redirect yourself to that main index page. I applied the code to the footer of the specific index page (All projects/ .sqs-gallery-design-autocolumns), but that doesn't solve the reoccurring of the logo action. our site: https://www.burtonhamfelt.nl/

exactly what I mean yes! Have it full-size, but only that first header image.

Hi, for our index page we use a lot of whitespace and page padding all around, however, for the actual project pages we would like the first header image to be fullscreen (no whitespace or padding around) and then the rest of the content should be within that page padding again. We work with an Avenue Template and preferably don't want to see any whitespace for the site header/title either if possible. We do want a title + subtitle as an overlay over this image, but this we can manage in the image style settings + spacers I think. Does anyone know how to fix this? This page is an example > https://www.burtonhamfelt.nl/projects/#/docklands/ Thank you!

https://www.burtonhamfelt.nl/projects/

Hi there! Could someone please help me with a css code for my Avenue template. I would like for the thumbnail titles to work as a hover overlay per index image, but have the thumbnail title underneath the image instead of in/on it. Earlier I had received this code from @tuanphan /* Test something */ .index-thumb-title-position-overlay #projectThumbs .project .project-title { transform: unset !important; opacity: 1 !important; top: unset !important; bottom: unset !important; color: black !important; margin-top: 5px; } a.project { overflow: visible !important; } This did do the trick for having the thumbnail title underneath the image without it adding additional padding space underneath, but the hover action is not working here, neither is it perfectly centered per image. Does anyone know what to add/substract from the code to make it work like a 'centered fading/showing when hovering' title underneath each project image. Thank You in advance!

Hello, We have a problem about page structure, We do understand how to change and play with the spacer blocks but whatever we try, the outcome stays that it looks different on different types of devices. The layout of the project pages on our website should all look similar, but unfortunately it looks different on my laptop (MacBook) than on my colleagues computer (LG). This problem is not only limited to the brands of the computers but also to the devices: phone and tablet. How can we arrange it in a way it looks similar everywhere? And, if we need to code for this, which code do we need and how do we do this? …because we have never done this before.