Help with some CSS, Responsive content

Community Usage questions
1

Hi,

I've created a standard button in OSC and using pseudo CSS elements I created the font text on top. It works great but was wondering if there is a way to get the font to resize itself based on the size of the button?

Here is my css which I edit/call upon from my custom Theme.CSS. I call upon the icon using my Class: Music_Icon_Only I get the content from the Bravura music font alt code.

My idea was perhaps to use calc() and a font-size variable to make it responsive. CSS isn't my strong suit so after some time I thought it best to ask anyone else if they could lend a hand or suggestions to try?

.Music_Icon_Only {
  text-transform: none;
  border: none;
  border-radius: 5rem;    
}

.Music_Icon_Only:before {
  --font-size: 40rem;
  font-family: 'Bravura';
  display:grid; 
  height: 100%;
  width: 100%;
  place-items: center center;  
  justify-content: center;
  align-content: center;
  color: black;
  font-size:calc(var(--font-size) - 1vw);
  padding-top:calc(var(--font-size) - 50%);
  z-index: -1;  
}

.Music_Icon_Only label {
  align-items: flex-end;
  padding-bottom: 3% !Important;
  color: transparent;
}

image
image785×286 14.1 KB

Cheers,
DMDComposer

2

It's not possible to set the font size relative to the element's size using css. At best you could retrieve the widget's width or height property (@{this.width}) and play with it (only if it's not set to auto and if the size is not overriden by the parent container's layout).

1 Like
3

Thanks, Jean for your prompt response. That at least makes me feel better for scratching my head endless this morning. I'll mess with your suggestion and see if it works better for me.

Cheers!

4

Is this post of any help? (automatic text scaling example)

1 Like
5

Ty Udo.

Yes, I'll have to add this into my template. Thank you for finding a good solution. This combined with some media queries will be perfect for my needs.

Cheers,
DMDComposer