Customized font does not hold up when resizing brower window (?)

[DreamerInDesert]

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.

[Max]

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:

.global-styles,
[class*="FloatingMobile__Container-sc"] {
  font-family: 'Paprika';
}

Please check your website and let me know if everything is fine now

[DreamerInDesert]

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!

[Max]

Hi there, @DreamerInDesert

Here is the CSS code to change the widget’s height:

.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:

@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

[DreamerInDesert]

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

.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

[DreamerInDesert]

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?

Thanks.

[Max]

Hi there, @DreamerInDesert

Here is the adjusted code to resize the play/pause button and image:

@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?