# Make image take up more width on desktop

**URL:** <https://community.elfsight.com/t/make-image-take-up-more-width-on-desktop/175426>\
**Category:** Customization\
**Tags:** event-calendar\
**Created:** [September 29, 2026, 12:31pm UTC](https://community.elfsight.com/t/make-image-take-up-more-width-on-desktop/175426 "2026-09-29T12:31:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lilykgamble](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@lilykgamble](https://community.elfsight.com/u/lilykgamble)\
**Post date:** [September 29, 2026, 12:31pm UTC](https://community.elfsight.com/t/make-image-take-up-more-width-on-desktop/175426/1 "2026-09-29T12:31:13Z")

</div>

Hello! Is there a code snippet I can add to make the event image take up more width, rather than the event details?

[![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/6/d62bd9cc37c0166275e05189a06c6e694f14902e.jpeg)](https://mpv.tickets.com/?agency=PANHANDLE_TICKET_MPV&orgid=45489&pid=9745888&_gl=1*1eo5pkb*_gcl_au*MTA0ODUwMzcwNy4xNzg3MjM3NTY5*_ga*MTM2OTU0ODg5MC4xNzg3MjM3NTY5*_ga_CBWJ82Z4E9*czE3ODc1ODI4MzYkbzQkZzEkdDE3ODc1ODQ5OTkkajQkbDAkaDA.#/event/9745888/seatmap/?minPrice=24.5&maxPrice=61.5&quantity=2&sort=price_asc&ada=false&seatSelection=true&onlyCoupon=true&onlyVoucher=false)

---

<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 29, 2026, 1:01pm UTC](https://community.elfsight.com/t/make-image-take-up-more-width-on-desktop/175426/3 "2026-09-29T13:01:32Z")

</div>

Hi there, @lilykgamble 👋

You just need to fix the image cropping, right?

If so, please try to use this CSS code and let me know if you like the result:

```auto
.eapp-events-calendar-media-image {
  object-fit: fill!important;
}

```

---

<div class="post-metadata">

**Author:** ![lilykgamble](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@lilykgamble](https://community.elfsight.com/u/lilykgamble)\
**Post date:** [September 29, 2026, 1:20pm UTC](https://community.elfsight.com/t/make-image-take-up-more-width-on-desktop/175426/4 "2026-09-29T13:20:51Z")

</div>

Hi Max!

That helped with the cropping, but I also wanted the image side to take up more of the width and reduce the info section’s area:

 ![Screenshot 2026-09-29 at 8.19.19 AM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/0/0066daefe53849df44e3b48bf67438523accbfbb.png)

---

<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 29, 2026, 1:53pm UTC](https://community.elfsight.com/t/make-image-take-up-more-width-on-desktop/175426/5 "2026-09-29T13:53:26Z")

</div>

Got you!

This CSS code should help:

```auto
.eapp-events-calendar-slider-item-big {
  --image-width: 70%;
}

.eapp-events-calendar-slider-item-info {
  width: calc(100% - var(--image-width)) !important;
}

.eapp-events-calendar-slider-item-imageContainer {
  width: var(--image-width) !important;
  left: calc(100% - var(--image-width)) !important;
}

```

  

Give it a try and let me know how it worked 😉