Slider width not adjusting inside the stack block

  • Resolved stlpl

    (@stlpl)


    4 months, 2 weeks ago

    Slider fails to correctly adjust its width to the stack block, causing layout distortion in the block editor.

    Steps to reproduce:

    1. Insert a slider containing a few slides (e.g. 10) inside the stack block (3 slides per page).
    2. In each slide, place a wide image (300 px).
    3. Set the spacing, e.g. 40 pixels (the problem occurs without defining the spacing, but then you have to insert more slides).

    The more slides, the worse it gets. The error does not usually occur on the front-end. I tested it with the Twenty Twenty-Five theme, WP 6.8.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter stlpl

    (@stlpl)

    4 months, 1 week ago

    After additional testing, the problem also appears on the front-end in loop mode without the stack block. It simply stops adapting to the container at some point when the viewport width changes.

    Thread Starter stlpl

    (@stlpl)

    4 months, 1 week ago

    I found a simple solution to this problem:

    .wp-block-splide-carousel__container {
    	width: 100%;
    }

    Custom CSS for width issues on narrow screens:

    @media screen and (max-width: 781px) {
    	.wp-block-splide-carousel__container {
    		max-width: calc(100vw - <global-left-and-right-padding>px);
    	}
    }
Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.