Enabling Prev/Next arrows creates x overflow

  • Resolved fkohrt

    (@fkohrt)


    3 years, 1 month ago

    Thanks a lot for your plugin which has a very nice overall look!

    I am having issues with the Prev/Next arrows when using the block’s full width mode: After enabling the arrows, the page overflows in x direction. I could get rid of the navigation bar by adding the following CSS code, but then the right arrow is still partly invisible. I am using WordPress 5.9 on Firefox 94.

    body {
    overflow-x: hidden;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Virgildia

    (@virgildia)

    @fkohrt thanks for using the plugin!

    The block’s full layout (class .alignfull) relies on your theme’s CSS. By default, on align full the arrows are inset into the carousel. There should not be an overflow x. You may have to modify your theme’s .alignfull style. If you share a link to your website I can take a look.

    • This reply was modified 3 years, 1 month ago by Virgildia.
    Thread Starter fkohrt

    (@fkohrt)

    @virgildia I see. Yeah, sure.

    Plugin Author Virgildia

    (@virgildia)

    @fkohrt it looks like your theme’s global.css is overwriting the carousel button properties. It is adding the text “previous” and “next” to the carousel causing an overflow.

    Please add the following in your custom CSS (your custom CSS should be loaded after global.css):

    .wp-block-cb-carousel .slick-next, .wp-block-cb-carousel .slick-prev {
  font-size: 0;
  line-height: 0;
}

    I also recommend you make the arrows white and larger. Below is the full CSS:

    .wp-block-cb-carousel .slick-next:before, .wp-block-cb-carousel .slick-prev:before {
  color: #fff;
  font-size: 30;
}
.wp-block-cb-carousel .slick-next, .wp-block-cb-carousel .slick-prev {
  font-size: 0;
  line-height: 0;
  width: 30px;
  height: 30px;
}

    The carousel slider block uses minimal default CSS and is meant to be adjusted by developers. In a future update I am planning to add style options.

    • This reply was modified 3 years, 1 month ago by Virgildia.
    • This reply was modified 3 years, 1 month ago by Virgildia.
    Thread Starter fkohrt

    (@fkohrt)

    @virgildia Thank you so much for your help, this looks just great! For future reference, I’ve been using the theme Michelle.

    • This reply was modified 3 years, 1 month ago by fkohrt.
    • This reply was modified 3 years, 1 month ago by fkohrt.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Enabling Prev/Next arrows creates x overflow’ is closed to new replies.