How can I preview CSS changes in Configurable List widget?

I am playing around with the configurable list and am trying to affect the look and feel of it by modifying the CSS.  I know how CSS works yet independently of the change I make, nothing happens.

How can I preview CSS changes?

Robert

I checked your form and I can see that you injected the CSS code inside the widget. This is the correct way of customizing the Configurable List using CSS.

It is possible that the CSS selector you are targeting is incorrect. We can help you in customizing the widget. Please let us know the changes you would like to do and we will provide the CSS code.

You should be able to see the changes in the Preview Mode or Live Mode.

We will wait for your response. Thank you.

What do you mean by "targeting the incorrect CSS selector"?
Robert
...

I would like to control the with of the controls (or cells) and display
borders so that the controls would show in a grid.
Robert
...

If you are targetting an entire column, you will use .col1, .col2, .col3, and so on.

If you are targetting the drop-down field in each column, then you use .col1 select, .col2 select, .col3 select, and so on.

The codes will be injected in the Custom CSS tab of the widget — How-to-Inject-CSS-Codes-to-Widgets

Also, you need to consider adjusting the width of the widget on the form. You can inject the custom CSS codes below to the Custom CSS tab of the form — How-to-Inject-Custom-CSS-Codes

iframe[src*="configurableList/"] {

  width: 100% !important;

}

Here's an example:

If you have any further questions, please do not hesitate to let us know.