Team showcase widget

[Helga]

Sorry for the delay, we had to figure out a couple of things

Here’s what I’d suggest you do:

1. Change the layout to the first one:

2. Add the following CSS code to fix the issue with the images:

.eapp-team-showcase-member-card-grid-photoContainer {
  border-radius: 0;
  overflow: visible;
}

.eapp-team-showcase-member-card-grid-photoContainer:after {
  border: none;
}

.eapp-team-showcase-member-card-photo-photo {
  object-fit: contain;
}

3. On the content tab, find the Groups section to create groups for the content in your widget"

4. Go to card and select the appropriate group:

Let me know if it helped!

[Fleur_Alleman]

[quote=“Helga, post:24, topic:17864”]

.eapp-team-showcase-member-card-grid-photoContainer {
  border-radius: 0;
  overflow: visible;
}

.eapp-team-showcase-member-card-grid-photoContainer:after {
  border: none;
}

.eapp-team-showcase-member-card-photo-photo {
  object-fit: contain;
}

Hi,

Is there anything that needs to be done for Google to crawl through the widgets? I am unable to find our leadership modules in Google search results.

https://t1site-fmgroup.fleurametz.flowers/en/Leadership
Regards,
Mariya

[Max]

Hi @Fleur_Alleman

Unfortunately, there is nothing can be done in this case, as our Team Showcase app doesn’t have a markup. I am really sorry about it!

Please let me know if this explains things or if you have any further questions

[Fleur_Alleman]

Could you provide me the code to make the logo showcase module responsive on mobile screens?Here is the link to the page with the module https://www.fmgroup.fm/en/home

.The width of the module should be responsive to the screen size.
This is staying at 1400 in all screens.
Regards
Mariya

[Max]

Hi @Fleur_Alleman

Sure! Your request is with our devs. I’ll keep you updated

[Max]

We’ve fixed the issue @Fleur_Alleman

Please check your website and let me know if you like what you see

[Fleur_Alleman]

In the mobile screens the widget looks awesome. But for bigger screens, Is it possible to reduce the padding? preferably full width or atleast as wide as the other modules in the website.

An I have one more request. Can you check the slider module in the same page. On mobile screens there is lot of white space on the top and bottom of the module.I would like to lose the white space and make the title and button responsive on differnt screens.

https://www.fmgroup.fm/en/home.

[Max]

Got you!

I’ve shared your request with the devs. I’ll get back to you once the solution is provided

[Fleur_Alleman]

And if possible make the header “Brands” in logo showcase module responsive as well.

[Max]

Okay, I’ve mentioned it as well

[Fleur_Alleman]

Thank you, really appreciate your help.

[Fleur_Alleman]

I wonder whether the team was able to fix the issues !

[Max]

Hi @Fleur_Alleman

The issue appeared to be quite complicated and our devs are still working on it.

Rest assured, I’ll make sure to keep you informed about any changes here

[Max]

Thank you for waiting @Fleur_Alleman

Our devs removed the extra spacing for your Slider on mobile, but I noticed that you’ve deleted their code from the Custom CSS field, that’s why the spacing appeared again.

Here is the code you can use to reduce the spacing on mobile:

@media (max-width: 440px) {
  .eapp-slider-slider-slide {
    height: 185px !important;
  }
  
  [class*='container']:has(.elfsight-app-6563185f-1e20-48c5-abd4-9cfb8bdad171) {
    padding: 0;
  }
}

We’ve added this code to adjust the text and button size on mobile:

  .eapp-slider-title-component {
    font-size: 18px;
  }

Also we’ve adjusted the width of your Logo Showcase widget by adding this code to the Custom JS field:

const waitForElement = (selector) => new Promise((res, rej) => {
  let i = 0;

  const check = () => {
    const component = document.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

waitForElement(".elfsight-app-a443e2a4-521c-4825-9c20-258193ede8e0").then(widget => {
  const widgetWrapper = [...document.querySelectorAll("[class*='container'][class*='wrap']")].find(node => node.contains(widget));
  widgetWrapper.id = 'elfsight-widget-wrapper';
});

And this code to the Custom CSS field:

.global-styles,
  #elfsight-widget-wrapper {
    margin: 0;
    max-width: unset;
  }
}

.global-styles,
#elfsight-widget-wrapper {
  max-width: unset;
}

.global-styles, .elfsight-app-a443e2a4-521c-4825-9c20-258193ede8e0 {
  max-width: 1400px;
  width: 100%;
}

@media (min-width: 48em) {
    .global-styles,
    #elfsight-widget-wrapper [class*='elfsight-app'] {
        padding:0 2.5rem
    }
}

@media (min-width: 93.75em) {
    .global-styles,
    #elfsight-widget-wrapper [class*='elfsight-app'] {
        max-width: 98.75rem
    }
}

Please check your website and let me know if you like what you see

[Fleur_Alleman]

Thank you, appreciate the support.

[Max]

You are always welcome

By the way, I’d like to let you know that we have a CSS Codes category where you can find the most popular codes for different apps (including Logo Showcase and Slider). Feel free to check it out -CSS Codes - Elfsight Community