How to create 2 columns in mobile view

Here is how to create 2 columns in mobile view.


Step 1: Go to the decision tree scripts as shown in the image below.


Step 2: Click on the “Add” button under the Decision Tree Scripts.

Step 3: Add the code below

<style>
@media screen and (max-width: 767px) {
  /* Make all containers display in a continuous flow */
  .question-answers-groups.pure-g {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  
  /* Force each item to be exactly 50% width */
  .question-answer-container.pure-u-1 {
    width: 50% !important;
    flex: 0 0 50%;
    box-sizing: border-box;
  }
  
  /* Remove any margins that might be causing issues */
  .question-answers-groups {
    margin: 0;
  }
  
  /* Ensure items have consistent spacing */
  .question-answer-outer {
    margin: 5px;
  }
  
  /* Fix for the separate groups */
  .question-mc {
    display: flex;
    flex-wrap: wrap;
  }
  
  .question-mc > .question-answers-groups {
    display: contents; /* This makes children act as if they were direct children of parent */
  }
}

</style>

Step 4: Save and publish.

Tagged: