Jump to content

Banner hides behind pictures

Recommended Posts

Hi, i have an issue which I cant solve. I added a custom Banner with a timer, and also injected custom CSS code, however it seems that the code is not correct and the banner does not appear over the pictures on the website but behind the pictures.

To add the banner I pasted this html code as block in the upper section of the landing page:
 

<div class="fixed-bottom-banner">
    <p>Beeile Dich! Das Angebot endet in: <span id="countdown">00:00:00:00</span></p>
</div>
<script>
    const countDownDate = new Date("June 16, 2024 23:59:59").getTime();
    const countdown = document.getElementById("countdown");

    setInterval(() => {
        const now = new Date().getTime();
        const distance = countDownDate - now;
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        countdown.innerHTML = `${days}T ${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m ${String(seconds).padStart(2, '0')}s`;

        if (distance < 0) {
            clearInterval();
            countdown.innerHTML = "EXPIRED";
        }
    }, 1000);
</script>

 

And this is the Custom CSS:
/* Custom CSS for Fixed Bottom Banner */
.fixed-bottom-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333; /* Change to your desired background color */
    color: #fff; /* Change to your desired text color */
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    z-index: 9999; /* Ensures the banner is on top of other elements */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Optional: adds a shadow for better visibility */
}
.fixed-bottom-banner p {
    margin: 0;
    font-size: 1rem;
}
#countdown {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ff6347; /* Change to your desired countdown text color */
}

 

 

I would very much appreciate the help for this!! I want the banner to appear over the pictures and not stay behind it. Thank you!

 

 

Link to comment
22 hours ago, Octavian9765 said:

Use this to Custom CSS box

section[data-section-id="6645c41746940b1c74151e3c"] {
    z-index: 999999 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.