# Full width slider

**URL:** <https://community.elfsight.com/t/full-width-slider/20850>\
**Category:** Customization\
**Tags:** before-after-slider\
**Created:** [September 22, 2023, 1:39pm UTC](https://community.elfsight.com/t/full-width-slider/20850 "2023-09-22T13:39:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [September 22, 2023, 1:39pm UTC](https://community.elfsight.com/t/full-width-slider/20850/1 "2023-09-22T13:39:16Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 22, 2023, 1:49pm UTC](https://community.elfsight.com/t/full-width-slider/20850/2 "2023-09-22T13:49:51Z")

</div>

Hi @Fleur_Alleman 👋

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 22, 2023, 2:21pm UTC](https://community.elfsight.com/t/full-width-slider/20850/3 "2023-09-22T14:21:59Z")

</div>

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

```auto
@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 🙂

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [September 25, 2023, 7:52am UTC](https://community.elfsight.com/t/full-width-slider/20850/4 "2023-09-25T07:52:11Z")

</div>

Hi, Thanks for the prompt support.

 ![Screenshot 2023-09-25 at 09.47.44](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/5/55209bf5d183d92e69c120c334685b8fc3d9232f.jpeg)  
 ![Screenshot 2023-09-25 at 09.48.30](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/7/7fd6e220f49e882990874db71fda8d98fd7617e1.jpeg)  
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.

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [September 25, 2023, 8:50am UTC](https://community.elfsight.com/t/full-width-slider/20850/5 "2023-09-25T08:50:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 25, 2023, 10:02am UTC](https://community.elfsight.com/t/full-width-slider/20850/6 "2023-09-25T10:02:57Z")

</div>

Hi @Fleur_Alleman 👋

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

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [September 25, 2023, 11:54am UTC](https://community.elfsight.com/t/full-width-slider/20850/7 "2023-09-25T11:54:50Z")

</div>

[https://t1site-fmgroup.fleurametz.flowers/en/home](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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 25, 2023, 11:59am UTC](https://community.elfsight.com/t/full-width-slider/20850/8 "2023-09-25T11:59:36Z")

</div>

The page is private:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/3/351fa2e46d8aac73ffad7debc12bc6acd07695db.png)

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

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [September 25, 2023, 12:09pm UTC](https://community.elfsight.com/t/full-width-slider/20850/9 "2023-09-25T12:09:53Z")

</div>

[https://www.fmgroup.fm/en/BrandsFMGroup](https://www.fmgroup.fm/en/BrandsFMGroup). This link should work.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 25, 2023, 12:14pm UTC](https://community.elfsight.com/t/full-width-slider/20850/10 "2023-09-25T12:14:03Z")

</div>

@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 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 25, 2023, 12:49pm UTC](https://community.elfsight.com/t/full-width-slider/20850/11 "2023-09-25T12:49:30Z")

</div>

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

```auto
  .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!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 25, 2023, 3:11pm UTC](https://community.elfsight.com/t/full-width-slider/20850/13 "2023-09-25T15:11:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 25, 2023, 4:19pm UTC](https://community.elfsight.com/t/full-width-slider/20850/14 "2023-09-25T16:19:29Z")

</div>

Here is the code you can use:

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

```

Check it out and let me know how it worked.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 2, 2023, 3:42pm UTC](https://community.elfsight.com/t/full-width-slider/20850/15 "2023-11-02T15:42:32Z")

</div>

@Fleur_Alleman Thank you for waiting!

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

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [November 14, 2023, 12:12pm UTC](https://community.elfsight.com/t/full-width-slider/20850/16 "2023-11-14T12:12:50Z")

</div>

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](https://www.fmgroup.fm/en/home).

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 14, 2023, 12:40pm UTC](https://community.elfsight.com/t/full-width-slider/20850/17 "2023-11-14T12:40:36Z")

</div>

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](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](https://www.fmgroup.fm/en/WhatWeDoFMGroup)):

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/c/c49d8a17da9c41ca33f5bd44e62de6208160446a.jpeg)

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 🙂

---

<div class="post-metadata">

**Author:** ![Fleur\_Alleman](https://avatars.discourse-cdn.com/v4/letter/f/96bed5/32.png) [@Fleur\_Alleman](https://community.elfsight.com/u/Fleur_Alleman)\
**Post date:** [November 14, 2023, 3:30pm UTC](https://community.elfsight.com/t/full-width-slider/20850/18 "2023-11-14T15:30:57Z")

</div>

Thank you, my bad.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 14, 2023, 3:33pm UTC](https://community.elfsight.com/t/full-width-slider/20850/19 "2023-11-14T15:33:59Z")

</div>

Don’t worry about it 😉

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [February 29, 2024, 10:17am UTC](https://community.elfsight.com/t/full-width-slider/20850/21 "2024-02-29T10:17:54Z")

</div>

Hi @Fleur_Alleman 👋

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [February 29, 2024, 10:35am UTC](https://community.elfsight.com/t/full-width-slider/20850/22 "2024-02-29T10:35:16Z")

</div>

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:

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

```

[Next page](https://community.elfsight.com/t/full-width-slider/20850.md?page=2)