# How to make bottom sheet wider on desktop

**URL:** <https://forum.ionicframework.com/t/how-to-make-bottom-sheet-wider-on-desktop/244067>\
**Category:** Ionic Angular\
**Created:** [September 5, 2024, 11:00am UTC](https://forum.ionicframework.com/t/how-to-make-bottom-sheet-wider-on-desktop/244067 "2024-09-05T11:00:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![folsze](https://avatars.discourse-cdn.com/v4/letter/f/ecd19e/32.png) [@folsze](https://forum.ionicframework.com/u/folsze)\
**Post date:** [September 5, 2024, 11:00am UTC](https://forum.ionicframework.com/t/how-to-make-bottom-sheet-wider-on-desktop/244067/1 "2024-09-05T11:00:03Z")

</div>

how to make bottom sheet wider on desktop? On mobile it’s 100% width. But on desktop only like 50%

Can I make it wider on desktop? Like 80% width? It would be very nice, since I am displaying huge images inside my modal which should be very wide.

Talking about this bottom sheet:

> **[ion-modal | Ionic Documentation](https://ionicframework.com/docs/api/modal#sheet-modal)**
>
> ion-modal: Ionic Mobile App Custom Modal API Component

---

<div class="post-metadata">

**Author:** ![twestrick](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/twestrick/32/136131_2.png) [@twestrick](https://forum.ionicframework.com/u/twestrick)\
**Post date:** [September 5, 2024, 11:42am UTC](https://forum.ionicframework.com/t/how-to-make-bottom-sheet-wider-on-desktop/244067/2 "2024-09-05T11:42:25Z")

</div>

Set `--width: 100%` on `ion-modal`.

```auto
<ion-modal style="--width: 100%" ref="modal" trigger="open-modal" :initial-breakpoint="0.25" :breakpoints="[0, 0.25, 0.5, 0.75]">
    <!-- Stuff -->
<ion-modal>

```

> **[ion-modal | Ionic Documentation](https://ionicframework.com/docs/api/modal#css-custom-properties)**
>
> ion-modal: Ionic Mobile App Custom Modal API Component

---

<div class="post-metadata">

**Author:** ![folsze](https://avatars.discourse-cdn.com/v4/letter/f/ecd19e/32.png) [@folsze](https://forum.ionicframework.com/u/folsze)\
**Post date:** [September 6, 2024, 5:36am UTC](https://forum.ionicframework.com/t/how-to-make-bottom-sheet-wider-on-desktop/244067/3 "2024-09-06T05:36:37Z")

</div>

Thank yoU! My modal was set by a controller but I simply set a (globals.scss) style for it, using the class set by the constructor