Custom CSS for horizontal scroll in a query loop. Help please

Your time is hugely appreciated : )

I’m a know-nothing artist learning WordPress and using ChatGPT as my custom CSS co-pilot.

I’d like to steer clear of adding plugins.

For horizontal scrolling, Custom CSS code ChatGPT gives me works when applied to a page where I’ve manually added a series of images. However the same code, with minor adjustments it provides for working with a query-loop, doesn’t work.

You can see both pages via the link to my front page I’ve provided below.

In the first working instance, I add the CSS class to a parent group containing a series of groups within.

In the second non-working instance, I’ve tried adding the CSS class to both a parent group containing the query-loop, and the query-loop itself (one at a time).

I wonder if anyone could please tell me how to fix this. I’d far rather be adding new content as individual dynamic posts than having to always edit a static page.

I’m using a child them of 2024, adding my CSS via a ‘style.css’ file in my theme-child folder directly in my hosting.

Working code for static page:

.windhorse-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 100px; /* Adjust spacing between images */
    width: 100%; /* Ensures the container fills the available width */
    padding-bottom: 10px; /* Optional */
}

.windhorse-scroll > * {
    flex: 0 0 auto;
    scroll-snap-align: center; /* Centers each image when scrolling */
    scroll-snap-stop: always; /* Ensures snapping happens reliably */
    width: 900px; /* Default width for desktop */
    height: 900px; /* Default height for desktop */
}

/* Style the images within the group */
.windhorse-scroll img {
    object-fit: cover; /* Ensures the images retain their aspect ratio */
    width: 100%; /* Ensures images fit inside their containers */
    height: 100%; /* Ensures images fit inside their containers */
    overflow: hidden; /* Prevents content overflow */
}

/* Hide the scroll bar */
.windhorse-scroll::-webkit-scrollbar {
    display: none;
}

.windhorse-scroll {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Responsive styles for mobile view */
@media (max-width: 600px) {
    .windhorse-scroll > * {
        width: 100vw; /* Makes each image/container full viewport width */
        height: auto; /* Allows height to adjust based on width */
    }

    .windhorse-scroll img {
        width: 100%; /* Ensures images take the full width of the container */
        height: auto; /* Maintains aspect ratio */
    }
}

Non-working code for dynamic page:

/* windhorse-by-category horizontal scroll */
.category-scroll-windhorse {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 100px; /* Adjust spacing between posts */
    width: 100%; /* Ensures the container fills the available width */
    padding-bottom: 10px; /* Optional padding */
}

.category-scroll-windhorse .wp-block-post-template {
    flex: 0 0 auto;
    scroll-snap-align: center; /* Centers each post when scrolling */
    scroll-snap-stop: always; /* Ensures snapping happens reliably */
    width: 900px; /* Adjust this based on your post content */
    height: auto; /* Adjust height based on your design */
}

/* Optional: Style the post content inside the loop */
.category-scroll-windhorse img {
    object-fit: cover; /* Ensures the images retain their aspect ratio */
    width: 100%; /* Ensures images fit inside their containers */
    height: 100%; /* Ensures images fit inside their containers */
    overflow: hidden; /* Prevents content overflow */
}

/* Hide the scroll bar for aesthetics */
.category-scroll-windhorse::-webkit-scrollbar {
    display: none;
}

.category-scroll-windhorse {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Responsive styles for mobile view */
@media (max-width: 600px) {
    .category-scroll-windhorse .wp-block-post-template {
        width: 100vw; /* Makes each post fill the viewport width */
        height: auto; /* Adjusts height based on content */
    }

    .category-scroll-windhorse img {
        width: 100%;
        height: auto; /* Maintains aspect ratio */
    }
}

• This topic was modified 1 year, 6 months ago by floatinghorizon.

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