Logo showcase widget

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.

1 Like

Hi @Fleur_Alleman :wave:

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

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.

1 Like

Hi @Fleur_Alleman :wave:

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

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

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

1 Like

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:

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?

1 Like

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

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

Hi @Fleur_Alleman :wave:

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?

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.

1 Like

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.

Checked again, and the logos aren’t displaying.

1 Like

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

Thank you

1 Like

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