Full width slider

[Fleur_Alleman]

Hi,
I’d like the images to be full width on mobile, don’t want the images being cropped on mobile. Being responsive .
Please find below the link to the page.
https://www.fmgroup.fm/en/BrandsFMGroup

Tried adding the following solution but didn’t work.
@media screen and (max-width:767px) {
.eapp-slider-slider-component div:empty {
background-size: contain !important;
background-repeat: no-repeat;
}
.eapp-slider-slider-component.jsx-1053260649 .eapp-slider-slider-slider {
height: 150px !important;
}
}
Thanks in advance for the support.

[Max]

Hi @Fleur_Alleman

Sure, your request is now with our devs! I’ll keep you updated

[Max]

We’ve fixed the issue by adding this code to the Custom CSS field:

@media screen and (max-width:767px) {
  .eapp-slider-slider-component div:empty {
    background-size: contain !important;
    background-repeat: no-repeat;
  }
  .eapp-slider-slider-component 
  .eapp-slider-slider-slider {
    height: 150px !important;
  }

  .global-styles, 
  .elfsight-app-6563185f-1e20-48c5-abd4-9cfb8bdad171 {
  	max-width: 100% !important;
  }
}

Please check your website and let me know if it’s fine

[Fleur_Alleman]

Hi, Thanks for the prompt support.

Now the image fits the mobile screen but again the title and the button is way too big. Please find attached screenshots of full width banner is another website. This is what I am looking for. Hope Elfsight would be able to help.

[Fleur_Alleman]

And can you also look into the widget’s fade property? I feel there is a glitch before the fade in for the first slide.
Thanks in advance.

[Max]

Hi @Fleur_Alleman

Could you please describe a fade effect issue in more detail? A screenshot or a video screencast would be highly appreciated

[Fleur_Alleman]

https://t1site-fmgroup.fleurametz.flowers/en/home
This home page uses the slider with two images. The first image of the girl with red bouquets fades in then again it has another fade in before the text “empowering floral partners” appears.
I hope this explains my request.

[Max]

The page is private:

Could you please make it public available or provide me with the credentials in dm?

[Fleur_Alleman]

https://www.fmgroup.fm/en/BrandsFMGroup. This link should work.

[Max]

@Fleur_Alleman Oh, I see the issue!

I’ve shared your request with our devs. I’ll get back to you once anything comes up

[Max]

Here is the CSS code we’ve added to the widget to reduce the size of the title and button on mobile:

  .eapp-slider-title-component {
    font-size: 16px;
  }
  
  .eapp-slider-button-link {
    height: 36px;
    font-size: 12px;
  }
}

Check it out and let me know if it’s fine

As for the fade issue, it appeared to be quite complicated. Our devs are still investigating it. I’ll keep you updated!

[Max]

Sure, we’ll check things and let you once the solution is provided

[Max]

Here is the code you can use:

  .global-styles,
  div:has(> .elfsight-app-6563185f-1e20-48c5-abd4-9cfb8bdad171) {
    padding: 2rem 0;
  }

Check it out and let me know how it worked.

[Max]

@Fleur_Alleman Thank you for waiting!

We’ve fixed the fade issue. Please check your widget and let me know if it’s fine

[Fleur_Alleman]

Yes, thank you so much.
I am facing another issue with the full width slider. The links aren’t get redirected.Can you have a look at it please.
https://www.fmgroup.fm/en/home.

[Max]

Hi @Fleur_Alleman

I’ve checked your webpage and see that when clicking on the slider image, everything is working fine and you get redirected to this page - https://www.fmgroup.fm/en/Whatwedo.

However, when clicking on the buttons, you get redirected to the page that no longer exists (https://www.fmgroup.fm/en/WhatWeDoFMGroup):

So, you just need to add the correct link to the button.

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

[Fleur_Alleman]

Thank you, my bad.

[Max]

Don’t worry about it

[Max]

Hi @Fleur_Alleman

Sure, I’ll check the issue with the dev team and will get back to you a bit later

[Max]

This issue occurs because of the container where the widget is installed. Please add this code to the Custom CSS field and let me know if it worked for you:

.global-styles, ._container_owvhx_1 {
  display: block;
  max-wdith: 100%
}