Code effecting all portfolio pages.

<!-- -->



   

<div class="splash-wrapper" id="loader-container">

    <img src="https://static1.squarespace.com/static/5fa9e5889998b469eb3b9171/t/6614b1b565c30336249f290c/1712632245814/eye-logo-animation.gif"/>

</div>



<style>

  div#loader-container img {

    max-width:250px;

}

  /* Loader animation styles */

  .splash-wrapper {

    display: none; /* Initially hidden */

    position: fixed;

    z-index: 9999;

    background-color: black;

    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: 0.65s;

    animation-delay: 5s;

    top: 0;

  }



  @keyframes slideOut {

    from {

      margin-left: 0vw;

    }

    to {

      margin-left: -100vw;

    }

  }

  @media screen and (max-width:767px) {

  div#loader-container {

    background-size: cover;

}

div#loader-container img {

    max-width: 500px;</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>

 So I applied this code above to my portfolio homepage in header code injection. Problem is the code is being applied to all the portfolio pages when it loads. every time. I just want it to be applied to the main portfolio page which displays all of my portfolio pieces. this portfolio display page also exists as the home page to my entire website.

Is there way to adjust the code so it is only applied to the display page?

To hide it on Portfolio Sub Pages, you can use this code to WEBSITE > Website Tools > CUSTOM CSS

body.view-item .splash-wrapper {
	display: none !important;
	visibility: hidden !important;
	z-index: -1 !important;
}

@tuanphan Thank you so much this worked perfectly