• By default, LeadsHook Decision trees display one column wide on mobile.
  • If it has many questions, there will be a lot of vertical space.
  • This means a lot of scrolling for your users.

Before

  • We can override this layout using custom CSS

After

  • First just create a new decision tree level script
  • And then copy paste the following code, to create a two column layout.
<style>
@media screen and (max-width: 1024px) {
  	.row{
  	 margin: auto;
     }
	.answer-col{
        float: left !important;
        width: 130px !important;
    }
    .question-answer.selected .panel.panel-default.panel-answer, .question-answer.selected:hover .panel.panel-default.panel-answer{
    	width: 100px !important;
    }
    .panel.panel-default.panel-answer{
    	font-size: 16px !important;
    }
}
</style>

Video instructions:

Leave a Reply

Your email address will not be published. Required fields are marked *