Brands – Switch Align-to-top for Align-to-middle

Dear,

Currently the Brands witget is making a display “align to top” which I find not user friendly at all. How to change this towards “align to middle”?

Thanks

Hello,

Enter the row settings and set the content as per your needs http://prntscr.com/m1dpuo

Best Regards

Hi,

I applied the row settings as you just said, but it doesn’t make difference.

Hello,

You need to upload images of the same height. There is no other option.

Best Regards

Ok thanks

I have tried to put images of same height but then it makes the pictures too small. This workaround does not suit me.

Please provide me the right CSS code to make the pictures align-to-middle.

Hello,

Add this code to the Theme settings > custom CSS

.brands-carousel .owl-stage {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

Best Regards

Thanks for the code. However, I just notice a small issue.
If you look at the following video (https://gevcen.tinytake.com/sf/MzIwNDI4N185NjAyMzU1), you’ll notice that :

– when the page loads, the brands are first aligned-to-top
– once page fully loaded, the CSS code then applies and makes it align-to-middle

Why isn’t it aligned-to-middle from the beginning, upon page loading?

Try to replace it with this code

.brands-carousel .owl-carousel {
    display: flex;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

Sorry, not replace but add to the previous one.

Works great, thanks!

[Author]

Posts