Display questions horizontally

DHE ,
Provided there are no page breaks between these questions, you can achieve this using the two methods listed below. Here we are using a div container with id "Questions".
1) Here I've opened the HTML in rich content editor and added a style tag there to change the div's css property by the id set "Questions" to demonstrate when to display the questions side by side.
2) Enter the JS box below in the question in the order you want the questions to start appearing side by side. I've added the following code there:
document.getElementById('Questions').style.display ='flex';
Again, I'm accomplishing the same task , but using JS.
Below are the results obtained after applying the above methods. I hope this is what you wanted
to achieve

Hi DHE,
As per my understanding of your request you wish to show some question side by side and rest as usual.
This is a standalone code and no way is related to above code.
To achieve this you need to refer below screenshot:
apply this line of code on each question you want side by side.
Below is the result:

Hope this resolves your query😊!!
PS: Posting solution here for the benefit of the community

Thank you very much! The code works for general questions but is not compatible with display logic. I will wait some more to see if there are other ideas or workarounds.
https://community.qualtrics.com/XMcommunity/discussion/comment/54508#Comment_54508

Hi DHE , I think you should try in page display logic and also apply click event on your JS code so on the selection of any option of Q1, JS to display Question side by side (code provided by qualtrics_nerd ) will run.

https://community.qualtrics.com/XMcommunity/discussion/comment/54519#Comment_54519Thanks, can you be more specific of how you recommend to change the code?

I wish I could send you screenshot and working code ad well. But I have no laptop right now.
Let me just give you brief. When you write your logic on display logic pop up. You can see there is a checkbox at the bottom called in page display logic. You can click on that. Then you can try below Jquery code.

jQuery("#IDofOption").click(function(){
jQuery("this.questionId").css("display","inline-block");
});

Please replace the #IDofOption with that option ID of Q1' that option, on whose selection you want to show the next question.

Hi All,
I have a similar requirement where I have close to 12 questions where I want to display first 3 questions in row 1 and next set of 3 questions in row 2 and next set in row 3 and last set of 3 in row 4.
Any help is appreciated here.

Hi Appzk ,
I believe we can achieve your request with below codes:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/


});


Qualtrics.SurveyEngine.addOnReady(function()
{
let ques=document.getElementById("Questions");

ques.style.cssText="display:grid;grid-template-columns:1fr 1fr 1fr;"


});


Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/


});
Screenshot of the preview:
Hope it resolves your query😊!!!

Hi qualtrics_nerd ,
This worked like magic!
Is it possible to create custom for each row, say for example I have 10 questions and 1st row has 3 questions display and 2nd row has to be only with 2 questions and row 3 with 5 questions.
Your help is much appreciated.

Hi Appzk ,
I think you are looking for below structure which you can achieve using only below style code:



Hope it resolves your query😊!!!

I don’t see the code to do this?  Can you provide it again @qualtrics_nerd?  I basically need 4 rows with 1 question each row on the first 3 rows and then 4 questions on the last row.  I found a code generator online that gave me the code below, but couldn’t figure out how to get it to work.

.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "row1 row1 row1 row1"
    "row2 row2 row2 row2"
    "row3 row3 row3 row3"
    "row4-1 row4-2 row4-3 row4-4";
}

.row1 { grid-area: row1; }

.row2 { grid-area: row2; }

.row3 { grid-area: row3; }

.row4-1 { grid-area: row4-1; }

.row4-2 { grid-area: row4-2; }

.row4-3 { grid-area: row4-3; }

.row4-4 { grid-area: row4-4; }