Sometimes its not loading the first containter and doesnt know why… have to refresh the page many times and the it shows, but I think there is a problem on there…

Have anyone the same problem?

When I add and activate the Max Mega Menu in my header, it causes a horizontal scroll to appear on my site. When I deactivate, the horizontal scroll goes away.

I’m working in a local environment, so I can’t post a link.

I searched for other issues similar to mine, but haven’t found any.

Is this a known issue?

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 */
    }
}

I’m facing an issue with my website. In my mobile device once I swap to the left direction a huge white space disappears. I wonder how can I remove this blank space.

You can see the issue on the following link.

https://ibb.co/ph2s25w

Any support will be much appreciated

I have cleared cache.
Restarted machine.
Tried creating new fresh instance of a WP page with fresh Webyx settings (not copied from another instance on another page).
Horizontal card style: true
Normal scrolling website: false
Using custom template: false

All attempts to reconcile issue have failed. Until the issue is identified and corrected, I will not be able to create new Webyx instances moving forward. Pages created with full width prior to this morning appear to work as expected. Please review and advise.

my plugin is up to date, didn’t use screen stretch, tried both full width and box in content width option.

also have seen an old forum where 1 person was getting the same problem still not working for me.

But I don’t know how to implement it in WP for it to work with your plugin.
Can you help?
Thanks !