Tagged: partner logo, vertical alignment
-
AuthorPosts
-
March 26, 2018 at 1:32 pm #932991
Hi,
I am using the Partner/Logo Element.
Can somebody provide me with a CSS code to achieve a vertical alignment of the logos? My images are not all of equal height. So, I would like to solve this problem with CSS instead of editing images.
Thanks!
RiccardoMarch 27, 2018 at 6:02 am #933386Hey Riccardo,
Thank you for using Enfold.
I’m sorry but you can’t achieve this with css alone. It will also distort the images. Please resize the images first and make sure that they have the same sizes just like in the demo.
// https://kriesi.at/themes/enfold/
These are few of the images used in the demo.
// https://kriesi.at/themes/enfold/files/2013/10/woocommerce.png
// https://kriesi.at/themes/enfold/files/2013/10/kriesi.png
// https://kriesi.at/themes/enfold/files/2013/10/dribbble.pngBest regards,
IsmaelMarch 27, 2018 at 9:17 am #933481that will be the best start : try to give the images a unique Appearance.
on that page here i give to the partner-logo element a custom class
first is sameheight – second is samewidth
for the values it depends on the possibility to show the whole image – so on my example it makes no sense to give a width more than 20%
otherwise the images can not show with proportional aspect ratio.https://webers-testseite.de/partner-logos/
you have to adjust these values to your partner-logos and settings.samewidth .slide-entry-wrap { display: inline-flex; } .samewidth .slide-entry { margin-bottom: 0px !important; } .samewidth img { width: 220px !important; height: auto; position: relative; top: 50% !important; transform: translateY(-50%); } .sameheight img { height: 50px !important; width: auto !important; }
on responsive case you see that same height option leeds to some special behavior – it depends on how you like to handle this case what we could do.
March 27, 2018 at 12:48 pm #933623Hi,
Another solution is to use png logos of same size with transparent background this will ensure the logo will stay center aligned.
Best regards,
VinayMarch 27, 2018 at 2:30 pm #933677thanks vinay thats what i mentioned with:
that will be the best start : try to give the images a unique Appearance.
sorry for that bad english – its not what i try to say: try to give the pictures the same outer size.
but sometimes the users not even have a good image processing program.
It is allmost better to optimize the images for the intended use. ( on perfomance reasons too)March 27, 2018 at 5:41 pm #933776Hey guys,
Thank you very much for all answers. I eventually did the transparent background thing.
Best,
RiccardoMarch 27, 2018 at 6:08 pm #933791Hi,
Thanks #@Guenni007
Glad it worked for you :)
We will close this ticket, in case you have any issue in future please open a new ticket.
Best regards,
Vinay -
AuthorPosts
- The topic ‘Vertical alignment of Partner Logos’ is closed to new replies.