# Display choice options in columns

**URL:** <https://support.prodi.gy/t/display-choice-options-in-columns/496>\
**Category:** Uncategorized\
**Tags:** enhancement, front-end, solved\
**Created:** [April 17, 2018, 12:36pm UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496 "2018-04-17T12:36:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![akshitasood63](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/akshitasood63/32/455_2.png) [@akshitasood63](https://support.prodi.gy/u/akshitasood63)\
**Post date:** [April 17, 2018, 12:36pm UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/1 "2018-04-17T12:36:00Z")

</div>

Can we display the options in form of columns , in case they are large in number and are going out of the screen ?

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [April 17, 2018, 5:34pm UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/2 "2018-04-17T17:34:40Z")

</div>

Not at the moment, no. Columns are currently only enabled for images, which tend to take up more space, even in lower numbers. But I can add this to our list of possible future enhancements 🙂

---

<div class="post-metadata">

**Author:** ![akshitasood63](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/akshitasood63/32/455_2.png) [@akshitasood63](https://support.prodi.gy/u/akshitasood63)\
**Post date:** [April 18, 2018, 6:40am UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/3 "2018-04-18T06:40:52Z")

</div>

Thanks.

---

<div class="post-metadata">

**Author:** ![akshitasood63](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/akshitasood63/32/455_2.png) [@akshitasood63](https://support.prodi.gy/u/akshitasood63)\
**Post date:** [February 23, 2019, 12:08pm UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/4 "2019-02-23T12:08:35Z")

</div>

Hello ines,

I was wondering if any such feature has been added which could fit my use case.  
If not, then would it be much effort to make some changes in the html css files for Prodigy?

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [February 23, 2019, 12:22pm UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/5 "2019-02-23T12:22:19Z")

</div>

With the new `global_css` option in v1.7, you should be able to add this pretty easily. The options container doesn’t have a human-readable class name at the moment, but you can find the current compiled one by opening your browser’s developer tools:

 ![54](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/1X/b589e82e925a975e1fb9da47c90a9541297480e3.png)

If you’re using a modern browser, the following CSS should be all you need:

```css
.c01132 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

```

This will display the contents of that container (i.e. the options) using [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) with two equal columns and a gap of 20px in between. You can add the override in your `prodigy.json` or you recipe config like this:

```python
"global_css": ".c01132 {...}" # or via variable or from file

```

---

<div class="post-metadata">

**Author:** ![akshitasood63](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/akshitasood63/32/455_2.png) [@akshitasood63](https://support.prodi.gy/u/akshitasood63)\
**Post date:** [February 23, 2019, 1:27pm UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/6 "2019-02-23T13:27:59Z")

</div>

That worked.  
Thanks a lot

---

<div class="post-metadata">

**Author:** ![AlejandroJCR](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/alejandrojcr/32/1681_2.png) [@AlejandroJCR](https://support.prodi.gy/u/AlejandroJCR)\
**Post date:** [April 24, 2019, 9:15am UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/7 "2019-04-24T09:15:06Z")

</div>

Hello. I’m also interested in having multiple choices in several columns, for the cases where you could have multiple classes. Best regards

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [April 24, 2019, 10:09am UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/8 "2019-04-24T10:09:38Z")

</div>

The value of `grid-template-columns:` in my code above are the column widths. So if you need three columns, you could make it `1fr 1fr 1fr` and so on. (`fr` stands for “fraction of the available space”).

---

<div class="post-metadata">

**Author:** ![AlejandroJCR](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/alejandrojcr/32/1681_2.png) [@AlejandroJCR](https://support.prodi.gy/u/AlejandroJCR)\
**Post date:** [April 24, 2019, 2:34pm UTC](https://support.prodi.gy/t/display-choice-options-in-columns/496/9 "2019-04-24T14:34:44Z")

</div>

Thanks, it works, pretty good! If In my case was class .c01127. I’m trying get the font size smaller, it’s also inside this specif class?