Hi everyone, as per the title, I am trying to centre (or center) a video clip in a carousel. The clip is wider than the carousel and when it is viewed on different screen sizes it ends up off-center.
I can centre images, but not a linked video.
I have been messing with this for a few days now and cannot centre the clip, so here I am.
Can anyone tell me how to do this in BSS please? Hopefully I am just missing something very obvious.
Thanks,
Tom
For some reason, the Bootstrap Carousel still uses floats to position the slides (the .carousel-item class is the CSS for the Slide). The width of the slide is set to 100% in the CSS. If your video has a fixed width that is larger or smaller than the width of the slide, it will not be centered.
If you embed your video by using the Responsive Embed component placed inside the Slide, it will only get as large as the slide. If you deliberately make the video is smaller than the Slide (say by adding the W-50 utility class to the Responsive Embed component,) the video will end up all the way to the left. You can center it by highlighting the slide and using the Flexbox options. Set Flex Container to Flex, and Justify Content to Center.
Hope this helps.
Thanks printninja, I have re-sized the slides and used the Flexbot options and it seems to work well enough.
Hi printninja, another reply for you… the site is up, www.polka.co.uk and if you look at the first image carousel containing the video you will see what I have done. The height changes between the video and the image slides, and the size of this height change changes on different screen sizes. I am OK with it as it is, but if you can think of a way to make them uniform then that would ultimately be better!
Cheers, Grizzly.
I sent you a PM requesting you send me the .bsdesign file of your website so I can look at the issue with your nav link stuck on active. If you send me the file, I’ll also take a look at the carousel issue.