# Keep desktop size in mobile

**URL:** <https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844>\
**Category:** Customization\
**Tags:** audio-player\
**Created:** [February 17, 2025, 9:21pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844 "2025-02-17T21:21:48Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [February 17, 2025, 9:21pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/1 "2025-02-17T21:21:48Z")

</div>

I would love to have the same width size I have for floating player on desktop, to remain when it goes to mobile size. I do not want it to jump to spread across the screen. 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:** [February 18, 2025, 7:24am UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/3 "2025-02-18T07:24:30Z")

</div>

Hi @Rev_Devan 👋

Sure! Here is the code for your use case 😉

```auto
.global-styles, [class*='MinimizedPlayer__StyledPlayer-sc'] {
  width: max-content!important;
}

```

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [February 21, 2025, 9:12pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/4 "2025-02-21T21:12:49Z")

</div>

ok I see it works when minimized, however the minimized still hides behind text on my website. So I have been having not minimized, can you provide the same code for when it is like that… I should learn how to do it but why when I have you guys 😇

---

<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 24, 2025, 10:16am UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/5 "2025-02-24T10:16:13Z")

</div>

Could you please send me a link to the page, where your widget is installed?

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [February 24, 2025, 11:44pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/6 "2025-02-24T23:44:14Z")

</div>

It does it in the Mobile preview in my dashboard of apps. The latest one I did was number nine in the audio player. The webpage is on is this: [9, {Commonly referred to as: "Faiths”} - UndefinableandExpansive.org](https://undefinableandexpansive.org/s/9.html)

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [February 24, 2025, 11:51pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/7 "2025-02-24T23:51:44Z")

</div>

That’s the one that I did the code you gave me on so far, but if you wanna see how it is going behind the text and the button when it is minimized, here is another page. You will have to minimize the player to see it and then scroll down on the website and you see it go behind the buttons, but it’s not clickable on a computer or tablet if it is behind the text and stuff. [13, {Commonly referred to as: "Origins”} - UndefinableandExpansive.org](https://undefinableandexpansive.org/s/13.html)

---

<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 25, 2025, 10:36am UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/8 "2025-02-25T10:36:20Z")

</div>

Hi @Rev_Devan 👋

Thank you so much!

I’ve checked these pages on desktop and mobile and couldn’t replicate the issue: the widget is displayed above other buttons on the pages when minimized:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/3/03ea5ad9ed5fd7592e9cc309495336164c925d07.jpeg)

  

Could you please send me a screenshot of how you see the issue?

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [February 25, 2025, 8:33pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/9 "2025-02-25T20:33:27Z")

</div>

This first image shows how I would like it to NOT be, with the original request in this feed. It shows the mobile size of the next photo.  
#1

 ![Screenshot 2025-02-25 at 1.05.22 PM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/7/572a08ac2c95d5ac05eab02f6dcab240c8f36b3e.jpeg)

This is the size of the non-minimized floating player looks like on the desktop. This is how I would like it to look on mobile regarding the original request.  
#2

 ![Screenshot 2025-02-25 at 1.05.33 PM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/6/9666d122beea08966bb4b399e4a6f40238097820.jpeg)

This next image shows the problem with minimized player on a desktop. it hides behind the buttons and text and is not passable to click. However it is fine on mobile.  
#3

 ![Screenshot 2025-02-25 at 1.06.07 PM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/e/9ef8511efbb8363e4baefac8b9db53e27e882bbc.jpeg)

These two next images is to show that the code you provided is good, only for mobile and minimized. compared to one without the code.  
#4

 ![Screenshot 2025-02-25 at 1.06.22 PM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/c/eca07719f763cc7c0292f25ced0f81d5361b30b0.jpeg)  
#5  
 ![Screenshot 2025-02-25 at 1.26.08 PM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/0/60e5f1de2f75932b01be7d4f43695b4fb35759aa.jpeg)

To summarize, ideally I would like the minimized player to float on top and remain the size of the desktop versions. However if the floating behind the text and buttons persist (as seen in image #3), I would like the player (seen in image #1) to remain the same size (seen in image #2).

I hope that clearifies things well.  
Thanks again!

---

<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 26, 2025, 2:01pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/10 "2025-02-26T14:01:36Z")

</div>

Hi there, @Rev_Devan 👋

We’ve fixed the issue with this CSS code:

```auto
[class*="AudioPlayer__Component-sc"] {
  z-index: 999999999 !important;
}

```

  

Please check your website and let me know if it’s fine now 🙂

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [February 26, 2025, 11:01pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/11 "2025-02-26T23:01:05Z")

</div>

In conjunction with the last code provided, it is perfect 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:** [February 27, 2025, 10:05am UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/12 "2025-02-27T10:05:56Z")

</div>

No problem 😉

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [September 23, 2025, 9:04pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/13 "2025-09-23T21:04:56Z")

</div>

@Max Hey, Trying to keep the site less cluttered, with everything accessible. So I revive this issue. Is there anyway I can get this even smaller? Maybe with only the image to player in little box in corner?

---

<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 24, 2025, 10:13am UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/14 "2025-09-24T10:13:39Z")

</div>

Hi there, @Rev_Devan 👋

You’d like to make the minimized player on mobile even smaller, by removing the track title, right?

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [September 24, 2025, 1:06pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/15 "2025-09-24T13:06:03Z")

</div>

Yes, and I ask because it doesn’t work to uncheck those on the visible list.

---

<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 24, 2025, 2:08pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/16 "2025-09-24T14:08:00Z")

</div>

Got it!

We’ve added this CSS code to your widget;

```auto
@external {
  .es-minimized-player {
    width: max-content !important;
  }

  @media (max-width: 480px) {
    .es-minimized-player {
      min-width: auto;
    }

    .es-minimized-player-track-info {
      display: none;
    }
  }
}

```

  

Please check it out and let me know if you like the result 🙂

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [September 24, 2025, 2:17pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/17 "2025-09-24T14:17:44Z")

</div>

That’s good, can I get it without the close button also? Just the image to start or stop?

---

<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 24, 2025, 2:34pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/18 "2025-09-24T14:34:55Z")

</div>

Sure, I’ve slightly adjusted the code! Here is how it looks now:

```auto
@external {
  .es-minimized-player {
    width: max-content !important;
  }

  @media (max-width: 480px) {
    .es-minimized-player {
      min-width: auto;
    }

    .es-minimized-player-track-info {
      display: none;
    }

    [class*="CloseButton__StyledCloseButtonComponent-sc"] {
      display: none;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [September 24, 2025, 2:38pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/19 "2025-09-24T14:38:51Z")

</div>

Excellent, you rock. Sorry to rely on you guys so much, but is there anyway to get it to float away from the edges like on desktop? and maybe round out corners too?

 ![Screenshot 2025-09-24 at 8.37.05 AM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/6/167d6ed53ae9505da655c67426b187ad3e211db3.jpeg)

---

<div class="post-metadata">

**Author:** ![Rev\_Devan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rev_devan/32/78722_2.png) [@Rev\_Devan](https://community.elfsight.com/u/Rev_Devan)\
**Post date:** [September 24, 2025, 2:53pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/20 "2025-09-24T14:53:38Z")

</div>

It’s beautiful, thank you! … Assuming I can add that code to everything else?

---

<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 24, 2025, 2:55pm UTC](https://community.elfsight.com/t/keep-desktop-size-in-mobile/101844/21 "2025-09-24T14:55:38Z")

</div>

We’ve just added this part to your code:

```auto
.es-minimized-player {
  min-width: auto;
  margin: 12px;
  padding: 8px !important;
  border-radius: 8px
}

```

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

And yes, you can use these styles in other widgets with the same layout 🙂