width breaks layout on narrow sizes

  • Resolved James Monroe

    (@jhmonroe)


    9 months ago

    Love the new block-based implementation for ease-of-use and not needing shortcodes. Your plugin is the best minimalist solution for creating a carousel!

    Issue 1: Even with the block inside a group set to content width, it fills to the exact “content width” in pixels (as opposed to being 100% or 100vw)

    Here’s code I added to the group containing the slider which seems to fix the issue

    @media only screen and (max-width: 835px) and (orientation: portrait) {	
    	.fixwidth {
    	box-sizing: border-box;
    height: fit-content !important;
    max-width: calc(100vw) !important;
    }	

    }

    Here you can see it at work in my test page (where I’m also comparing to Raza’s version with many more controls, but it uses a CPT): https://mmonroedesign.com/test-carousel-new/

    Notes: My fixwidth hack only seems to throw off the spacing of the navigation dots a bit on mobile.

    Issue 2: The new buttons on v2 are outside the slider container which also breaks the layout. (notice how the maza example has an option to place them inside)

    Possible solutions… move the arrows for mobile/narrow breakpoints or have a checkbox where the user can choose to remove arrows only for mobile/narrow breakpoints. The current checkbox removes in all instances

    For v1 I had written some CSS to move the arrows below the slides to right and left of the dots:

    /* CAROUSEL SLIDER BLOCK FOR GUTENBERG FIX */

    .is-layout-flex .wp-block-cb-carousel {max-width:calc(100vw - var(--wp--preset--spacing--small));}

    .wp-block-cb-carousel .slick-next::before, .wp-block-cb-carousel .slick-prev::before {color:#000; opacity:25%}

    .slick-next::before, .slick-prev::before {font-size:25px;}

    /* .slick-next::before, [dir="rtl"] .slick-prev::before {
      content: '▶︎';
    }
    .slick-prev::before {
      content: '◀︎';
    }*/

    .slick-prev, .slick-next {width:25px; height:25px; top:calc(100% + 15px);}
    .slick-prev {left:0px; z-index:1;}
    .slick-next {right:0px; z-index:1;}

    @media only screen and (max-width: 835px) and (orientation: portrait) {	
    .wp-block-cb-carousel .slick-slide {
        padding-left: 0;
        padding-right: 0;
    }
    .slick-arrow.slick-prev, .slick-arrow.slick-next {display:none !important;}
    }

    PS: Even jetpack’s carousel has similar problems requiring custom CSS — not sure why they don’t just include it!

    /* SLIDER FIX */

    @media only screen and (max-width: 835px) and (orientation: portrait) {	
    ul.wp-block-jetpack-slideshow_swiper-wrapper.swiper-wrapper {
    height: fit-content !important;
    max-width: calc(100vw - 60px) !important;
    }
    }
Viewing 1 replies (of 1 total)
  • Plugin Author Virgildia

    (@virgildia)

    7 months, 2 weeks ago

    Hey @jhmonroe thanks for setting up the demo page!

    V1 is no longer supported so you can safely remove it from your site and switch to v2.

    Issue 1: Carousel inside a group only fills the “content width”

    This behavior comes from how block editor themes handle layout. Most themes define a maximum content width using the CSS variable:

    max-width: var(--wp--style--global--content-size);

    This means that certain blocks inside the group block will be limited to that width (even if the group block and content width is full width). If you want the carousel (or other blocks inside a group) to span the full width of the group, select the block, open the Align option from the block toolbar, and choose Full Width. Any nested blocks will also expand accordingly.

    It’s a matter of how individual themes are set up and not something controlled by the plugin. Even though you may need a bit of custom CSS for your specific layout, it’s best to handle it in your theme.

    Issue 2: Navigation buttons appear outside the slider container

    That’s the default behavior for the carousel. By design the navigation arrows are placed outside the slider area, and they only move inside when the carousel is set to Full Width. There is no option yet to move arrows inside. You can use custom CSS for this.

    So if your carousel is inside a Full Width group and you want the arrows inside the slide area, set the carousel block’s alignment to Full Width as well.

    If you’re not using a Group block for things like background color, padding, etc, you can skip it altogether. The carousel block has its own alignment options and you can just set it to Full Width directly. But again, it also depends how your theme and CSS is set up.

    Hope that helps! Let me know in case I misunderstood anything.

Viewing 1 replies (of 1 total)

The topic ‘width breaks layout on narrow sizes’ is closed to new replies.