Full width slider

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.

1 Like

Hi @Fleur_Alleman :wave:

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

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

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.

1 Like

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.

1 Like

Hi @Fleur_Alleman :wave:

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

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.

1 Like

The page is private:

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

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

1 Like

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

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

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

Thanks again. I am sorry to come back and forth with this slider. I have another request. Is it possible to reduce the margin on top of the fullwidth slider in mobile like in bigger screens flush with the navigation?


1 Like

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

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.

@Fleur_Alleman Thank you for waiting!

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

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.

1 Like

Hi @Fleur_Alleman :wave:

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

Thank you, my bad.

1 Like

Don’t worry about it :wink:

I’ve uploaded four images in the full-width slider, all of the same size. I’ve set the hidden property for two out of the four images. When only two images are visible, they display in a frame-fill manner. However, when I unhide the other two, the images get cropped. The first screenshot illustrates how I want the images to appear, and the second one shows what happens when I turn off the hidden attribute for all four images. Currently, you can only see two images on the webpage, but I’ve uploaded four images and turned on the hidden property for 2.
https://www.fmgroup.fm/en/home



Thanks is advance!

1 Like