# Logo showcase widget

**URL:** <https://community.elfsight.com/t/logo-showcase-widget/18805>\
**Category:** Customization\
**Tags:** logo-showcase\
**Created:** [August 29, 2023, 11:13am UTC](https://community.elfsight.com/t/logo-showcase-widget/18805 "2023-08-29T11:13:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [August 29, 2023, 11:13am UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/1 "2023-08-29T11:13:40Z")

</div>

Can you please share the css code to adjust top/bottom margins and padding for logo showcase widget?

I am using the logo showcase as two rows and would like to reduce the spacing between the rows.

 ![Screenshot 2023-08-29 at 13.11.39](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/a/af28d2d614f05da680eb44a24031890b47f5a0a4.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [August 29, 2023, 11:46am UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/3 "2023-08-29T11:46:41Z")

</div>

Hi @Fleur_Alleman 👋

Sure, here are the CSS codes you can use:

```auto
.eapp-logo-showcase-logo-showcase-content{
    margin: 0px 0 !important; 
}

```

```auto
.global-styles,
.eapp-logo-showcase-logo-showcase-component {
  padding: 0 !important;
}

```

However, if any difficulties come up, please send me a direct link to the webpage where your widget is installed.

I’ll be happy to check things for you 🙂

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [October 9, 2023, 12:14pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/4 "2023-10-09T12:14:00Z")

</div>

Hi,  
I have added the above codes and those doesn’t seem to reduce the spacing between the logo widgets especially on the mobile.  
Here is the link to the page: [https://www.fmgroup.fm/en/homepagefmgroup](https://www.fmgroup.fm/en/homepagefmgroup).

Am I missing something here? I tried the settings for mobile behaviour and it doesn’t seem to be working.  
Can it be made responsive on phone?  
Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 9, 2023, 1:08pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/5 "2023-10-09T13:08:48Z")

</div>

Hi @Fleur_Alleman 👋

I am so sorry about this misunderstanding!

Here is the code to reduce spacing between the widgets:

```auto
.global-styles,
div:has(>.elfsight-app-a443e2a4-521c-4825-9c20-258193ede8e0) {
  padding: 0!important;
}

.global-styles,
div:has(>.elfsight-app-24547915-6bb8-40a9-8e44-ee18225de0c4) {
  padding: 0!important;
}

```

Check it out and let me know if it worked 🙂

To make the widgets full width, you just need to click on Width setting on the Layout tab and enable Full Width mode:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/e/eb3a62e8548ed14e8d8dd8e1bce265a40c749399.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/9/9a3380615089f8ff940d6afbdeacd474cf9ea459.png)

As for the number of logos on mobile, there is Mobile Behavior setting, but for some reason it isn’t working correctly now.

Our devs are investigating the issue. I’ll immediately get back to you once any news come up 🙂

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [October 9, 2023, 2:37pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/6 "2023-10-09T14:37:25Z")

</div>

Thank you, this works awesome now. Can you also give the css code to change the header font size ? Now it is at 36px.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 9, 2023, 2:50pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/7 "2023-10-09T14:50:21Z")

</div>

Happy to hear that you are fine now!

To change the title font size, choose Header Style section on the Style tab and change the font size in the Title size section:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/f/f4deed8523ef69d994c4e589a82d81d5fc8d6b86.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/f/f527ae7ea4fc33e2d3131dd0c112d42db0f5fdc7.png)

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [October 9, 2023, 2:52pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/8 "2023-10-09T14:52:57Z")

</div>

Herein the link: [[https://www.fmgroup.fm/en/homepagefmgroup](https://www.fmgroup.fm/en/homepagefmgroup) ] I have also used a full width slider. What should be the ideal size of the images to be uploaded. Can you share the size in pixels?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 9, 2023, 3:09pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/9 "2023-10-09T15:09:14Z")

</div>

I’ll consult with our devs and get back to you a bit later!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 9, 2023, 3:35pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/10 "2023-10-09T15:35:18Z")

</div>

1920x600 is the optimal size for the images to look neat on most devices

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 11, 2023, 10:28am UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/11 "2023-10-11T10:28:14Z")

</div>

Hi @Fleur_Alleman 👋

Thank you for waiting!

We’ve fixed the issue with the Mobile behavior settings. Now you can set the number of logos to display on mobile with the help of Logo Size for Mobile in the Mobile Behavior section on the Layout tab:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/f/fe7ff1106935541cbca60fcbc8c4dddbd33837aa.png)

Could you please check it and let me know how it worked?

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [February 19, 2024, 12:39pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/12 "2024-02-19T12:39:32Z")

</div>

Hi,  
I was trying to change the size of the logos and somehow the logos have all disappeared.  
[https://www.fmgroup.fm/en/home](https://www.fmgroup.fm/en/home).  
Sorry for the mess up. Please help.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [February 19, 2024, 12:48pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/13 "2024-02-19T12:48:06Z")

</div>

Hi @Fleur_Alleman

I’ve checked your page and logos are displayed on my end:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/5/05bb9879bdfe866e4e45de59bee81bbedb5538d0.png)

Could you please double-check it and let me know if everything is fine?

In case the issue still persists, please share a screenshot of what you see.

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [February 19, 2024, 1:20pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/14 "2024-02-19T13:20:02Z")

</div>

Checked again, and the logos aren’t displaying.

 ![Screenshot 2024-02-19 at 14.15.31](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/1/51205d30b72ba869845d55202671a0ec12c56009.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [February 19, 2024, 1:38pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/15 "2024-02-19T13:38:15Z")

</div>

Got it! Now the issue appeared on my side as well.

Our devs will investigate the issue and I’ll let you know once I receive a response from them 🙂

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [February 19, 2024, 2:19pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/16 "2024-02-19T14:19:54Z")

</div>

Thank you

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [February 19, 2024, 3:25pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/17 "2024-02-19T15:25:15Z")

</div>

There was an issue with the script in the Custom JS field. We’ve replaced the previous script with the new one:

```auto
const listenerBlock = (selector, callback) => {
  const initialTargetNode = document.querySelector(selector);
  if (initialTargetNode) {
    return callback(initialTargetNode);
  }

  const mutationObserver = new MutationObserver((mutations, observer) => {
    mutations.forEach(({ addedNodes }) =>
      addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const targetNode = node.querySelector(selector);
          if (targetNode) {
            observer.disconnect();
            return callback(targetNode);
          }
        }
      })
    );
  });

  mutationObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
};

listenerBlock('.elfsight-app-a443e2a4-521c-4825-9c20-258193ede8e0', (block) => {
  block.style.margin = '0 auto';
  const widgetWrapper = block.closest("[class*='container'][class*='wrap']");
  widgetWrapper.id = 'elfsight-widget-wrapper';
  widgetWrapper.style.display = 'block';
});

```

Check it out and let me know if it fixed the issue on your end 🙂

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [July 2, 2024, 7:52am UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/18 "2024-07-02T07:52:37Z")

</div>

Hi,  
This logo showcase module is supposed to be displayed at 1400 px on large screens. It was working properly, but now it is displaying smaller in size. We are using two logo showcase modules, one at the top and the other at the bottom. Currently, when the bottom module is enabled, the webpage freezes. I am seeking your support to resolve these issues.  
[https://www.fmgroup.fm/en/home](https://www.fmgroup.fm/en/home), here you will find the module.

 ![Screenshot 2024-07-02 at 09.53.12](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/9/d9f7671f7a8bdb5fe70dea2b3f3a716ab482f296.jpeg)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 2, 2024, 2:17pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/19 "2024-07-02T14:17:03Z")

</div>

Hi there @Fleur_Alleman 👋

We’ve adjusted the CSS code for the width setting. Here is how it looks now:

```auto
@media (min-width: 1400px) {
  .global-styles, .elfsight-app-a443e2a4-521c-4825-9c20-258193ede8e0 {
    width: 1400px;  
  }
}

```

  

Please check your website and let me know how it works 😉

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [July 2, 2024, 2:55pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/20 "2024-07-02T14:55:28Z")

</div>

Could you check why the page freezes when I add two logo showcase modules to the same page at [https://www.fmgroup.fm/en/home-test](https://www.fmgroup.fm/en/home-test) ? The module works fine when there is just one.[https://www.fmgroup.fm/en/home](https://www.fmgroup.fm/en/home)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 2, 2024, 3:18pm UTC](https://community.elfsight.com/t/logo-showcase-widget/18805/21 "2024-07-02T15:18:20Z")

</div>

I’ve checked your page and everything seems to be fine now:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/9/59cc24c041599df347daefec358911267f92aa60.jpeg)

Could you please double-check it? If the issue still persists, please check your website in incognito mode.

[Next page](https://community.elfsight.com/t/logo-showcase-widget/18805.md?page=2)