Block-specific CSS code to rearrange position of questions on page

Hi everybody,


I am creating a survey in which I need to adapt the positioning of questions on the screen for some blocks only. Specifically, some questions should be shown next to each other instead of below/above. Since the number of blocks with the specific layout is approximately 100 (although each participant will only see ≈ 10 blocks at random), I set up a custom CSS code that arranges the questions depending on the order of appearance (1st, 2nd, 3rd) within the respective block using “nth-of-type()”. So far I am using the following CSS code:


#Questions div:nth-of-type(2) {
 width: 60vw !important;
 height: 10vw; 
 float:left;
 display:inline-block;
 padding-left:1vw !important;
}

#Questions div:nth-of-type(4) {
 width: 40vw !important;
 height: 15vw !important;
 float:right;
 display:inline-block;
 padding-left:1vw !important;
}

[...]

#Questions div:nth-of-type(10) {
 width:40vw;
 height: 12vw !important;
 float:right;
 display:inline-block;
 padding-left: 0.5vw;
 padding-right:1vw !important;
}


My problem is that I also need other blocks (on different survey pages) that should have a regular layout, i.e. questions shown below/above each other. I suppose the easiest would be to try to apply the CSS code above only to the 100 blocks that I want to modify using some sort of a “block id”. Then I could simply leave the layout of remaining blocks untouched. Does anybody know how I could do this?

There are a couple of related threads on this (e.g. https://community.qualtrics.com/XMcommunity/discussion/2098/block-specific-css), however, they simply want to display “Next” buttons in some blocks but not in others, so I do not know how to adapt this to my case.

Thanks a lot for your help.

Best wishes,
Laurenz