Overriding Bubble's default width, want to use REM's

[shaheenery]

Hello, I am converting a website to Bubble for a client. I am a Bubble newbie and trying to learn their way of doing things. I have some input fields with width set by REM’s.

Client wants input fields to be 14 characters long: .input-field { width: 14rem;} right?

Okay so obviously they don’t support it. But then there is the Classify plugin.

So in the ID attribute box I give a {addClass: "input-field"}

Great, now my input has the class.

Now the real problem: It seems Bubble ALWAYS gives a width in the style attribute of the input field. And based on how CSS works, this will alway take precedence over a width from a CSS class.

So is there anything I can do?

Something magic here with the width?

[AndyMountHood]

I’m also new to Bubble, but what I see elsewhere in this forum is that you can sometimes override Bubble’s display settings by including !important in your CSS. Here’s an example: How to vertically center pop-up on mobile 🤪

[shaheenery]

Thanks @AndyMountHood , I have been so conditioned to never use !important as a bad practice that I didn’t even think of it in this case.

I also was googling around to examples of live Bubble sites and it seems like maybe the style attributes are only like that in preview mode? I couldn’t find an official answer by searching.