# Customized font does not hold up when resizing brower window (?) **URL:** \ **Category:** General Questions\ **Tags:** audio-player\ **Created:** [February 17, 2025, 10:40am UTC](https://community.elfsight.com/t/customized-font-does-not-hold-up-when-resizing-brower-window/101713 "2025-02-17T10:40:32Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![DreamerInDesert](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@DreamerInDesert](https://community.elfsight.com/u/DreamerInDesert)\ **Post date:** [February 17, 2025, 10:40am UTC](https://community.elfsight.com/t/customized-font-does-not-hold-up-when-resizing-brower-window/101713/1 "2025-02-17T10:40:32Z")
So I place the generated Audio Player widget code on a webpage and set it to be at the top, width 100%. So far so good. When I drag the mouse to make the browser window narrower. 1. The audio widget jumps down to the bottom (OK, no problem that’s fine) 2. The font I chose couldn’t hold up. In fact i’ve tried several times and same issue happens, the font has got reset to the default font (whatever it is that the system has) I need help with issue #2 as I must deal with consistent look per reponsive design of my webpage, what Css class or somthing like that I need to grab to set it to desired font as the browser is being resized to pass a certain width? Thank you. ---
**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 17, 2025, 2:54pm UTC](https://community.elfsight.com/t/customized-font-does-not-hold-up-when-resizing-brower-window/101713/3 "2025-02-17T14:54:20Z")
Hi @DreamerInDesert 👋 We’ve used this code in the Custom CSS field on the Style tab of your widget’s settings to fix the issue: ```auto .global-styles, [class*="FloatingMobile__Container-sc"] { font-family: 'Paprika'; } ``` Please check your website and let me know if everything is fine now 🙂 ---
**Author:** ![DreamerInDesert](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@DreamerInDesert](https://community.elfsight.com/u/DreamerInDesert)\ **Post date:** [February 19, 2025, 3:44am UTC](https://community.elfsight.com/t/customized-font-does-not-hold-up-when-resizing-brower-window/101713/4 "2025-02-19T03:44:09Z")
Hello @Max - Thanks for the fix, appreciate the custom css installation 💐 However,for the embedded version, it would be nice if the 'Play/Pause" button is also resizable . The pause button also appears very big. I will create a separate post for it once I get a confirm that its size needs to be adjusted. For the regular horizontal player, its height can’t be adjusted? it’s quite tall. Thank you! ---
**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 19, 2025, 1:04pm UTC](https://community.elfsight.com/t/customized-font-does-not-hold-up-when-resizing-brower-window/101713/5 "2025-02-19T13:04:43Z")
Hi there, @DreamerInDesert 👋 Here is the CSS code to change the widget’s height: ```auto .global-styles, [class^='Bar__Container-sc'] { height: 120px; } ``` If you’d like to change the size of the Play/Pause button on mobile devices, please use this code in the Custom CSS field: ```auto @media (max-width: 500px) { [class*="Pause__Component-s"], [class*="Play__Component-s"] { scale: 0.6 } } ``` Please check it and let me know if it helped 🙂 ---
**Author:** ![DreamerInDesert](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@DreamerInDesert](https://community.elfsight.com/u/DreamerInDesert)\ **Post date:** [March 16, 2025, 4:53am UTC](https://community.elfsight.com/t/customized-font-does-not-hold-up-when-resizing-brower-window/101713/6 "2025-03-16T04:53:26Z")
Hello there Max, So the code to change the size of Play/Pause button does work, however, the CSS code for changing the widget’s height doesn’t take affect – is this because in the Custom CSS box I’ve already have this class .global-style with attribute that maintains the customized font? I’m not sure if I should combine the attributes within 1 class or just cut/pase what you gave me. When I cut/pasted what you gave me (so that I have 2 separate blocks of .global-style in 1 box) nothing happened, the height of the video player unchanged. That is, if I insert the 2 blocks in the Customized CSS box ```auto .global-styles, [class*="FloatingMobile__Container-sc"] { font-family: 'Paprika'; } .global-styles, [class^='Bar__Container-sc'] { height: 120px; } ``` Nothing happens to the height of the player ---
**Author:** ![DreamerInDesert](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@DreamerInDesert](https://community.elfsight.com/u/DreamerInDesert)\ **Post date:** [March 16, 2025, 5:07am UTC](https://community.elfsight.com/t/customized-font-does-not-hold-up-when-resizing-brower-window/101713/7 "2025-03-16T05:07:30Z")
On the topic of resizing browser window, the graphics that I uploaded for the music player (the flower seen in attatchment) would just stay the same whenever my browser window gets smaller, which makes the whole page a bit out of proportion. Can this rose be resized for mobil screen also? ![comm_uploadgraphic_resizable-or-not](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/6/166d120ac21204a737e582303993e8d8b08693e3.png) Thanks. ---
**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:** [March 17, 2025, 11:38am UTC](https://community.elfsight.com/t/customized-font-does-not-hold-up-when-resizing-brower-window/101713/8 "2025-03-17T11:38:28Z")
Hi there, @DreamerInDesert 👋 Here is the adjusted code to resize the play/pause button and image: ```auto @media (max-width: 500px) { [class*="Pause__Component-s"], [class*="Play__Component-s"], [class*="Image__Container-sc"] { scale: 0.6 } } ``` Regarding the heght, could you please send me a link to the page, where this widget is installed?