Number Rating Poll - Show on One Line

css

(Fellowship Forums) #1

Hello,

Is there CSS code that will allow the poll options (for example, 1-10) to fit onto one line instead of two?

Perhaps by decreasing the space between poll options?

For reference, here is what it currently looks like:

Thanks!


(Mittineague) #2

You asked this several days ago and were given the answer

How to Create Polls

So I’m guessing you want to make CSS changes but don’t know how to go about it?

When you use your browsers dev tools to ”inspect" the poll, what does its HTML look like?


(Jeff Atwood) #3

Have you considered hiring someone to help you with CSS changes on your site? Or do you have any friends that know CSS and could pitch in?


(Joe) #4

Try this:

div.poll li[data-poll-option-id] {
    display: inline-block;
}

Which would make the options appear on one line like so:

Until you run out of space and then they wrap onto the next line.

You can also decrease the padding like you mentioned to make things super tight by using this instead:

div.poll li[data-poll-option-id] {
    display: inline-block;
    padding: .25em;
}

Capture

And you can use this to achieve the same on “number” poll types:

div.poll[data-poll-type="number"] li[data-poll-option-id] {
    display: inline-block;
    width: auto;
    margin-right: 0;
}