And how can I work around it? I have just realized this -- or maybe it's unique me. No matter which CSS framework I use, forms occupy the entire width. I've tried resizing according to their keywords (e.g. "is-9" in Bulma), but none worked.
I created a section that wraps around the form that's written in ERB and wrote a CSS that sets max-width of that section.
Is this the only way to deal with this? Or is there a standard way that I'm missing? I cannot find any information related to this.
UPDATE:
Per the fantastic suggestions by the commenters, I have identified the specific CSS code within the CSS framework causing this, then I have overridden that code with my own in the application stylesheet.
This however seems cumbersome. Is this how CSS frameworks are used? Do they always set min-width as well as default width for forms to 100%?
As mentioned in the comments, I suggest you:
As to whether this is how CSS frameworks are used, I don't have a definitive answer. But, in my experience, the answer is "yes" and having the ability to override more general behaviors (in the framework) with more specific ones (in your application) puts the "Cascading" in Cascading Style Sheets.