I would think selecting the "Horizontal" option would do this but it doesn't -
I want to style my question to look like the attached image. I can handle styling the buttons but I am unsure how to align the text and answers to be side by side like how Qualtrics' Help pages have. See a screenshot here:
!
Note: I don't think it matters but just in case - I am loading this survey in an iframe into an existing webpage (a knowledge base).
Best answer by mattyb513
Try adding this to the question text:
```html
<style>
html .Skin .MC .SAHR .QuestionBody table td span.LabelWrapper label {
padding-bottom: 20px !important;
}
</style>
```
The problem is the padding on the bottom. I'm not sure why it's appearing incorrectly but that is what needs to be resolved.
I would start with a horizontal MC and do the following with JavaScript:
* Hide the question text div
* Create a new table cell at the beginning of the row and copy the question text to it
* Resize the table cells
mattyb513 - thanks so much! I keep trying to do as much via the Advanced CSS but it's really cumbersome. Your solutions works perfectly with one exception - the text in the Yes/No buttons is not aligned vertically in the middle.
> @mark2741 said:
> mattyb513 - thanks - here is a link to how I have it implemented:
> http://help.mark2741.webfactional.com/072718-1100/150151.htm
>
> Thanks again for your assistance!
Try the updated gist. I just added `padding-bottom: 20px !important` to the answer choices. I'm not positive it will work but it might.