Hello,Is it possible to change the layout of specific questions without overriding the whole layout of the survey?Specifically, I currently have a theme that has the following layout (Classic):I want to continue having this theme, however, for certain questions, I would prefer having checkboxes (for multiple choice) or radio buttons (for single choices) (example below, with Flat as the Layout):Any help would be appreciated. Please let me know if I should elaborate.

Updated comment here:<style>.Skin label.MultipleAnswer>span::before {content: "";display: inline-block;width: 17px;height: 17px;left: 10px;vertical-align: middle;margin-right: 10px;border-radius: 3px;border: 2px solid #9b9b9b;border-image: initial;background: 0 0 !important;}.Skin label.MultipleAnswer.q-checked>span::before {background: #26B6EA url(/jfe/themes/base-templates/qualtrics/base/version-1658262440254-05dae3/files/check.svg) no-repeat center center !important;background-size: 85% !important;border: 2px solid #007ac0 !important;-webkit-animation: check .2s forwards;-moz-animation: check .2s forwards;-o-animation: check .2s forwards;animation: check .2s forwards;}.Skin label.MultipleAnswer { position: relative; padding-left: 40px !important;}.Skin label.MultipleAnswer>span::before { position: absolute; top: 50%; margin-top: -0.6em;}</style>Click here to write question text.

@KellanMagaoayI built on the above for a better blending of Classic layout and the Radio buttons/Checkboxes from the Flat layout. Using the Classic layout as a base, the below will work to:add Radio buttons to Single Answer Multiple Choice questions for Vertical and Horizontal alignmentsadd Checkboxes to Multiple Answer Multiple Choice questions for Vertical and Horizontal alignmentsAs this thread is about question/page level styling, I wrap it all in a <style> tag so it can be included inside Question Text HTML, but it could all be added as CSS to the Style section of the Look and Feel if you wanted Radio buttons and Checkboxes for Multiple Choice questions throughout a Classic layout survey.If you only want this to only apply to Single Answer Multiple Choice questions, remove any lines of code that include .MultipleAnswer, .MAVR, or .MAHR.<style type="text/css">/*Adding Radio Buttons and Checkboxes from Flat layout to Classic*//*Adding for Vertical alignments*//*Adds space for vertical Radio buttons and Checkboxes*/.Skin .MAVR label.MultipleAnswer, .Skin .SAVR label.SingleAnswer { position: relative; padding-left: 40px !important;}/*Format the space where the vertical Radio buttons and Checkboxes are*/.Skin .MAVR label.MultipleAnswer>span::before, .Skin .SAVR label.SingleAnswer>span::before { position: absolute; top: 50%; margin-top: -0.7em;}/*Create Checkboxes for vertical multiselects*/.Skin .MAVR label.MultipleAnswer>span::before {content: "";display: inline-block;width: 17px;height: 17px;left: 10px;vertical-align: middle;margin-right: 10px;border-radius: 3px;border: 2px solid #9b9b9b;border-image: initial;background: 0 0 !important;}/*Format the vertical Checkboxes when selected*/.Skin .MAVR label.MultipleAnswer.q-checked>span::before {background: #26B6EA url(/jfe/themes/base-templates/qualtrics/base/version-1658262440254-05dae3/files/check.svg) no-repeat center center !important;background-size: 85% !important;border: 2px solid #007ac0 !important;-webkit-animation: check .2s forwards;-moz-animation: check .2s forwards;-o-animation: check .2s forwards;animation: check .2s forwards;}/*Create vertical Radio buttons for single selects*/.Skin .SAVR label.SingleAnswer>span::before { content: ""; display: inline-block; width: 17px; height: 17px; left: 10px; vertical-align: middle; margin-right: 10px; border-radius: 100%; border: 2px solid #9b9b9b; border-image: initial; background: 0 0 !important;}/*Format the vertical Radio button when selected*/.Skin .SAVR label.SingleAnswer.q-checked.q-focused>span::before, .Skin .SAVR label.SingleAnswer.q-checked>span::before { border: 2px solid #007ac0; background: #26B6EA !important; -webkit-box-shadow: inset 0 0 0 3px #fff; -moz-box-shadow: inset 0 0 0 3px #fff; box-shadow: inset 0 0 0 3px #fff; -webkit-animation: radio .2s forwards; -moz-animation: radio .2s forwards; -o-animation: radio .2s forwards; animation: radio .2s forwards;}/*Adds space for Horizontal Radio buttons and Checkboxes for Horizontal alignment*//*Adds formatting for Horizontal Radio buttons and Checkboxes selected*/.Skin .SAHR label.q-radio { height: 21px !important; width: 21px !important; border: 2px solid #9b9b9b !important;}.Skin .SAHR label.q-radio.q-checked, .Skin .SAHR label.q-radio.q-checked.q-focused { border: 2px solid #007ac0 !important; background: #26B6EA !important; -webkit-box-shadow: inset 0 0 0 3px #fff !important; -moz-box-shadow: inset 0 0 0 3px #fff !important; box-shadow: inset 0 0 0 3px #fff !important; -webkit-animation: radio .2s forwards !important; -moz-animation: radio .2s forwards !important; -o-animation: radio .2s forwards !important; animation: radio .2s forwards !important;}.Skin .MAHR label.q-checkbox { height: 20px !important; width: 20px !important; -webkit-border-radius: 2px !important; -moz-border-radius: 2px !important; -ms-border-radius: 2px !important; -o-border-radius: 2px !important; border-radius: 2px !important; border: 2px solid #9b9b9b !important;}.Skin .MAHR label.q-checkbox.q-checked {background: #26B6EA url(/jfe/themes/base-templates/qualtrics/base/version-1658262440254-05dae3/files/check.svg) no-repeat center center !important;background-size: 85% !important;border: 2px solid #007ac0 !important;-webkit-animation: check .2s forwards !important;-moz-animation: check .2s forwards !important;-o-animation: check .2s forwards !important;animation: check .2s forwards !important;}/*phone and desktop*//*desktop, buttons below*/@media all and (min-width:480px){.Skin .MC .MAHR table td, .Skin .MC .SAHR table td { text-align: center !important;}.Skin .MAHR td.LabelContainer, .Skin .SAHR td.LabelContainer { margin-bottom: 25px!important;}.Skin .MAHR td.LabelContatiner, .Skin .SAHR td.LabelContatiner { vertical-align: top !important; position: relative !important;}.Skin .MAHR label.MultipleAnswer.LabelPositionBELOW, .Skin .SAHR label.SingleAnswer.LabelPositionBELOW { padding-left: 20px!important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding-top: 5px !important; padding-bottom: 0 !important;}.Skin .MAHR td label.q-checkbox, .Skin .SAHR td label.q-radio { display: block !important;position: absolute !important; left: calc(50% - 10px) !important; bottom: 5px !important; cursor: pointer !important;}.Skin .MAHR label.MultipleAnswer.LabelPositionBELOW>span, .Skin .SAHR label.SingleAnswer.LabelPositionBELOW>span { padding-bottom: 35px !important;}}/*phone*//*phone, buttons on side*/@media all and (max-width:479px){.Skin .MAHR label.MultipleAnswer, .Skin .SAHR label.SingleAnswer { position: relative; padding-left: 40px !important;}/*Format the space where the Radio buttons and Checkboxes are*/.Skin .MAHR label.MultipleAnswer>span::before, .Skin .SAHR label.SingleAnswer>span::before { position: absolute; top: 50%; margin-top: -0.7em;}/*Create Checkboxes for multiselects*/.Skin .MAHR label.MultipleAnswer>span::before {content: "";display: inline-block;width: 17px;height: 17px;left: 10px;vertical-align: middle;margin-right: 10px;border-radius: 3px;border: 2px solid #9b9b9b;border-image: initial;background: 0 0 !important;}/*Format the Checkboxes when selected*/.Skin .MAHR label.MultipleAnswer.q-checked>span::before {background: #26B6EA url(/jfe/themes/base-templates/qualtrics/base/version-1658262440254-05dae3/files/check.svg) no-repeat center center !important;background-size: 85% !important;border: 2px solid #007ac0 !important;-webkit-animation: check .2s forwards;-moz-animation: check .2s forwards;-o-animation: check .2s forwards;animation: check .2s forwards;}/*Create Radio buttons for single selects*/.Skin .SAHR label.SingleAnswer>span::before { content: ""; display: inline-block; width: 17px; height: 17px; left: 10px; vertical-align: middle; margin-right: 10px; border-radius: 100%; border: 2px solid #9b9b9b; border-image: initial; background: 0 0 !important;}/*Format the Radio button when selected*/.Skin .SAHR label.SingleAnswer.q-checked.q-focused>span::before, .Skin .SAHR label.SingleAnswer.q-checked>span::before { border: 2px solid #007ac0; background: #26B6EA !important; -webkit-box-shadow: inset 0 0 0 3px #fff; -moz-box-shadow: inset 0 0 0 3px #fff; box-shadow: inset 0 0 0 3px #fff; -webkit-animation: radio .2s forwards; -moz-animation: radio .2s forwards; -o-animation: radio .2s forwards; animation: radio .2s forwards;}/*Adds space for Radio buttons and Checkboxes for Horizontal alignment*/.Skin .MAHR label.MultipleAnswer.LabelPositionBELOW, .Skin .SAHR label.SingleAnswer.LabelPositionBELOW {padding-left: 40px !important;padding-right: 40px !important;align-items: center !important;justify-content: center !important;text-align: center !important;height: 100% !important;}.Skin .MAHR label.MultipleAnswer.LabelPositionBELOW>span, .Skin .SAHR label.SingleAnswer.LabelPositionBELOW>span { padding-bottom: 0px !important;}}</style>Click to write the question text

Can I change the layout at the question-level without overriding the entire layout?

Can I change the layout at the question-level without overriding the entire layout? | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded