# Custom CSS to reduce height of slider

**URL:** <https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227>\
**Category:** General Questions\
**Tags:** event-calendar\
**Created:** [November 30, 2023, 6:06pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227 "2023-11-30T18:06:10Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![user4125](https://avatars.discourse-cdn.com/v4/letter/u/91b2a8/32.png) [@user4125](https://community.elfsight.com/u/user4125)\
**Post date:** [November 30, 2023, 6:06pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/1 "2023-11-30T18:06:10Z")

</div>

We would like to be able to reduce the height of the calendar widget in slider layout to something like half of viewport height. Is this possible with Custom CSS?

We did try this, but it did not appear to work.

@media (max-width: 940px) {  
.global-styles, .eapp-slider-slider-slider {  
height: 60vh!important;  
}  
}

The widget is on a secured web portal, so we can’t share a link to the page.

---

<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 30, 2023, 6:20pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/3 "2023-11-30T18:20:48Z")

</div>

Happy to see new faces around here! Welcome 👋

I’ve shared your request with our dev team and will get back to 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:** [December 1, 2023, 10:28am UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/4 "2023-12-01T10:28:15Z")

</div>

Here is the code you can use:

```auto
.global-styles, .eapp-events-calendar-slider-item-inner {
   height: 100px;
}

```

Just add it to the Custom CSS field on the Appearance tab of your widget’s settings and let me know if it helped 🙂

---

<div class="post-metadata">

**Author:** ![user4125](https://avatars.discourse-cdn.com/v4/letter/u/91b2a8/32.png) [@user4125](https://community.elfsight.com/u/user4125)\
**Post date:** [December 1, 2023, 4:02pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/6 "2023-12-01T16:02:31Z")

</div>

Thank you! Height adjustment works great, but now we have the date and the event details running into each other. Is there something I can adjust on my end or is there more custom code needed?

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

---

<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:** [December 1, 2023, 5:24pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/7 "2023-12-01T17:24:45Z")

</div>

Could you please share a link to the page where your widget is installed?

---

<div class="post-metadata">

**Author:** ![user4125](https://avatars.discourse-cdn.com/v4/letter/u/91b2a8/32.png) [@user4125](https://community.elfsight.com/u/user4125)\
**Post date:** [December 1, 2023, 5:32pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/8 "2023-12-01T17:32:51Z")

</div>

Unfortunately, it is a secured web portal, so we can’t share a link to the page.

---

<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:** [December 1, 2023, 5:49pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/9 "2023-12-01T17:49:44Z")

</div>

Got you!

I’ll check it with our devs and will get back to you once any news come 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:** [December 4, 2023, 12:57pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/10 "2023-12-04T12:57:46Z")

</div>

Thank you for waiting @user4125!

Please try to use this code and let me know if it worked for you:

```auto
.global-styles, .eapp-events-calendar-slider-item-inner {
   height: 150px;
}

.global-styles,
.eapp-events-calendar-slider-item-info {
  padding: 0 0 20px 90px!important;
}

```

---

<div class="post-metadata">

**Author:** ![user4125](https://avatars.discourse-cdn.com/v4/letter/u/91b2a8/32.png) [@user4125](https://community.elfsight.com/u/user4125)\
**Post date:** [December 4, 2023, 7:51pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/11 "2023-12-04T19:51:22Z")

</div>

That works very nicely, thank you!

---

<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:** [December 4, 2023, 8:00pm UTC](https://community.elfsight.com/t/custom-css-to-reduce-height-of-slider/28227/12 "2023-12-04T20:00:06Z")

</div>

No sweat 😉