Reduce padding with css on logo showcase

Ask the Community Customization
1

Hi,
I sent a personal request already for this, but maybe like this other people can profit.
I would like to reduce the padding around the logo section. There is a lot of space at the top and the bottom and left and right. As well, it would be great if I could align them left or right as well, so that they are not always centered.
I’ve seen this request before, but I would really love a short tutorial on the CSS.

Thank you
Julia

3

Hi Julia and welcome to the forum!

I wish I could teach you how to put together CSS codes, but I’m afraid we don’t have such tutorials yet :frowning:

However, it’s a very good idea, and we’ll try to think in this direction!

For now, I’ve asked the developers to create a CSS code for you, and I’ll be happy to send it over as soon as it’s ready. Or perhaps someone else could help you with this task faster :slight_smile:

4

Hi Julia and thank you for your patience!

I’m happy to say that the CSS code for your is ready :slight_smile:

  • This code will help you reduce the paddings above and below the widget:
.eapp-logo-showcase-logo-showcase-component {
    padding: 20px 0px;
}

  • To control side paddings, please check out SPACING BETWEEN LOGOS option in your widget’s settings.

  • To adjust the widget’s position, please use the following code:

.eapp-logo-showcase-grid-container {
    justify-content: flex-start;
}

To have the widget on the left, please keep flex-start value, and to move to the left, please change to flex-end

You should add both of the CSS codes to your widget’s Custom CSS field on Style tab:
image

Please let me know if it helped :slight_smile:

1 Like
5

Perfect :smiling_face_with_three_hearts: Thank you very much, it was exactly what I was looking for.

1 Like
6

Awesome! Thanks a lot for the update and have a fantastic week :hugs:

7

Hi

I tried to adjust the vertical spacing of the logos based on the CSS adjustment according to your info.

.eapp-logo-showcase-logo-showcase-component {
padding: 0px 0px;
}

I have set the values to 0.

The vertical distance is still a bit too much for my taste. See: Sponsoren PREVIEW | FC KMM

Am I doing something wrong? Or are there other ways to adjust the spacing?

Thanks for your help.

Best,
Thomas

1 Like
8

@thbirch welcome to the forum, Thomas! :hugs:

I see that my colleague Renata has already replied to your support ticket, and I do believe that the CSS code she provided worked fine for you :slight_smile:

Just in case, here’s the code:

.eapp-logo-showcase-logo-component {
margin: -25px 10px;
}