Footer Snippet Code Broke Site

Resolved shannonsadik
(@shannonsadik)

2 months, 2 weeks ago

My site has this long stretched out appearance on many of the containers on the link above (scroll down a little bit) and this page as well: https://heronpondhideaway.com/guest-info/ (notice the hero image and several containers below it). It doesn’t do it to all of the pages or even everything on one page.

I went through each plug in de-activating, and the issue was fixed when I deactivated the Snippet plug in. Sure enough when I deleted my footer code, the issue was resolved. I’m not sure what the issue is with the code. It seems ok to me and I even put it into chat gpt and they found no issues. Can you tell me what would be causing this? I left it in for now so you can review.

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Support

Jeff Mankini

(@jeffmankini)

2 months, 2 weeks ago

Hi Shannon,

Thanks for reaching out and thanks for supporting Code Snippets!

Could you please share the snippet you are using?

Best regards,
The Code Snippets Team

Thread Starter

shannonsadik

(@shannonsadik)

2 months, 2 weeks ago

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Set the background color */
        body {
            background-color: #D6D1CA;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column; /* Arrange content in column */
            align-items: center; /* Center content horizontally */
            min-height: 100vh; /* Make sure body takes up the full height */
        }

        /* Container for images to display them in a row */
        .image-container {
            display: flex;
            flex-direction: row; /* Images in a row */
            width: 100%; /* Make container width 100% */
            justify-content: center; /* Center images */
            gap: 0; /* No gap between images */
        }

        /* Style for each image */
        img {
            width: 20%; /* Let the width adjust based on content */
            height: 250px; /* Uniform height for all images */
            object-fit: cover; /* Ensure the image fills the container without distorting */
            display: block; /* Remove extra space below images */
        }
    </style>
</head>
<body>

    <!-- Image container with images -->
    <div class="image-container">
        <!-- Image 1 -->
        <img src="https://heronpondhideaway.com/wp-content/uploads/2025/02/White-WAter-Rafting-Hudson-River-Adirondacks-North-Creek-Larger-image.jpg" alt="Image 1">
        
        <!-- Image 2 -->
        <img src="https://heronpondhideaway.com/wp-content/uploads/2025/02/Gore-Mountain-Skiing-Adirondacks-Larger-scaled.jpg" alt="Image 2">
        
        <!-- Image 3 -->
        <img src="https://heronpondhideaway.com/wp-content/uploads/2025/02/Sawmill-Waterfalls-in-Fall-Larger-Image.jpg" alt="Image 3">
        
        <!-- Image 4 -->
        <img src="https://heronpondhideaway.com/wp-content/uploads/2025/02/Trout-Fishing-Hudson-River.jpg" alt="Image 4">
        
        <!-- Image 5 -->
        <img src="https://heronpondhideaway.com/wp-content/uploads/2025/02/Hiking-Moxham-Mountain-overlooking-North-Creek.jpg" alt="Image 5">
    </div>

</body>
</html>

Plugin Author

Atif Riaz

(@lightbulbman)

2 months ago

Hi @shannonsadik

Thanks for the reply and update,

Can I check the code you shared – are you adding exactly this code into a HTML snippet and inserting via a shortcode or in the head/ body section? If you can provide some further explanation of how you have this working / set up I think it will help clarify where the problem may be and the resolution.

I notice the pages linked look fine when I view them so perhaps this may already be resolved, hence why I will set this topic to resolved but your more then welcome to reopen if its still ongoing and we are happy to help.

Wishing you all the best.