2 Column Layout on Mobile

Introduction:

  • 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;
    }
  .row:after, .row:before{
  	display: inline !important;
  }
}
</style>

Video instructions:

UPDATED

Some users were complaining that the script doesn’t work for them.

The reason for this is because in the above example the answer labels are one word answers.

If you have answer labels that are several words long, then you will need to adjust the script accordingly.

Please use this one instead:

<style>
@media screen and (max-width: 1024px) {
  	.row{
  	 margin: auto;
     }
	.answer-col{
        float: left !important;
        width: 90px !important;
        min-height: 135px !important;
    }
    .question-answer.selected .panel.panel-default.panel-answer, .question-answer.selected:hover .panel.panel-default.panel-answer{
    	width: 80px !important;
    }
    .panel.panel-default.panel-answer{
    	font-size: 16px !important;
    }
  .row:after, .row:before{
  	display: inline !important;
  }
}
</style>

Note: that here we have made the widths of the answer ( and selected answer smaller ).

Plus we add a minimum height ( 135px in this example ). But you might need to increase/decrease this value as necessary. This is because some answers might only have a couple words. While other questions might have even ten words. Ensuring all questions have the same height will ensure they all fit perfectly in your two column layout. Instead of some two and then others only one column.

Tagged: