Logo showcase widget

[Fleur_Alleman]

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.

[Max]

Hi @Fleur_Alleman

Sure, here are the CSS codes you can use:

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

.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

[Fleur_Alleman]

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.

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.

[Max]

Hi @Fleur_Alleman

I am so sorry about this misunderstanding!

Here is the code to reduce spacing between the widgets:

.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:

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

[Fleur_Alleman]

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

[Max]

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:

[Fleur_Alleman]

Herein the link: [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?

[Max]

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

[Max]

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

[Max]

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:

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

[Fleur_Alleman]

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

[Max]

Hi @Fleur_Alleman

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

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.

[Fleur_Alleman]

Checked again, and the logos aren’t displaying.

[Max]

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

[Fleur_Alleman]

Thank you

[Max]

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

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

[Fleur_Alleman]

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, here you will find the module.

[Max]

Hi there @Fleur_Alleman

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

@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

[Fleur_Alleman]

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 ? The module works fine when there is just one.https://www.fmgroup.fm/en/home

[Max]

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

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