[Solved] [Known Issue] NPS left and right labels are not looking good in mobile interactions


If you’re using an NPS question that has left and right labels in your survey along with mobile interactions (Standard or One at a Time), you’ll probably notice that the labels don’t look great.

We do have a workaround though:

Add a custom class name to your NPS questions. “fix-label”

Now add this CSS to Style => Customize Theme => Custom => CSS

.sg-survey .sg-mobile-optimized td.sg-cell.sg-cell-1.sg-first-cell.sg-cell-label.sg-cell-left-label,
.sg-survey .sg-mobile-optimized td.sg-cell.sg-cell-13.sg-last-cell.sg-cell-label.sg-cell-right-label {
  width: 48% !important;

Lastly, dd the following Javascript to the page or to Style => Customize Theme => Custom => HTML in <script> tags

$(document).ready(function () {
  var columnPos = 13; //Where the column currently is
  var insertPos = 1; //Where we are going to move it to. Use 'last' if moving column to end of table
  var moveColumns = function (className) {
      var columnEls = $('.' + className + ' tr').children(':nth-child(' + columnPos + ')');
      columnEls.each(function () {
          //Use this line if moving the column anywhere but the end of the table
          var insertSibling = $(this).siblings(':nth-child(' + insertPos + ')'); 
          //Use this line if moving the column to end of table
          //var insertSibling = $(this).siblings(':' + insertPos + '-child');
  if ($('body').hasClass('sg-mobile-optimized')) {
    moveColumns('fix-label'); //Class name goes here

Please let us know if you have any trouble with the workaround.
Patrick - Survey McDuck asked

    Best answer


    Hey Everybody,

    Our Engineers have patched up this issue with Mobile and NPS questions and their labels!

    Please let us know if you are still seeing display issues here.  🙂

    Jon - The Survey Dude answered


      Question stats

      • Active
      • Views4559 times
      • Answers1 answer
      • Followers0 followers