My solution would be to assign a CSS class to the question and place the style rules in your
custom.css file so they are in the <head> element rather than the <body>.
Although, in HTML5, placing styles in the <body> is valid, it will force the browser to re-render the page as it loads. This causes an extra load on the browser and may be visible to the user. As a result, I try to avoid styles in the <body> element.
1) Assign a CSS class to the question something like "
input-width-500".
2) Place something like this in
custom.css:
Code:
.input-width-500 input[type="text"].form-control {
width: 500px;
}
@media (max-width: 768px) {
.input-width-500 input[type="text"].form-control {
width: auto;
}
}