Reduce padding with css on logo showcase

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

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:

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:

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

1 Like

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