Question Styling: Complex Grid - Mobile Smart

This article will show you how to format/style items within this specific question type

See the article following article if you have not added JavaScript and/or CSS to a question

See article: Adding JavaScript and/or CSS to your Question

Reduce Choice Button Height

Add the following code to your question CSS

/* MOBILE SMART BUTTONS - ADJUST MARGINS BETWEEN BUTTONS */
.cm-mobile-smart__wrapper--smart-question .cm-smart-button {
	padding: 3px 3px 3px 3px !important;
	margin: 3px auto !important;
}
/* DESKTOP - CONTROL BUTTON WIDTHS/HEIGHTS */ 
.cm-mobile-smart__wrapper--grid
.cm-smart-button {
    width: auto !important;
    padding: 3px 3px 3px 3px !important;
    height: 95px !important;
    max-width: 140px
    margin: 1px auto;
}

Snap Back to Top of the Page when you hit the 'NEXT' button

Add the following code to your question JavaScript

*Make sure to update your question number in the code as needed. Its currently Q100 in the code below.
See the following article for more details: Script: Mobile Smart - Snap Back to Top of Page

/* MOBILE SMART - SNAP TO TOP */ 
jQuery("#cm-NextButton").attr("href","#question-Q100");

Format Text Attribute to Stand Out

You may want to format the attribute text so that it stands out more on mobile. See example:
Add the following code to your question CSS

/* MOBILE SMART - ATTRIBUTE STYLING */ 
.cm-smart-header {
  font-weight: bold !important; /* BOLD */ 
  color: red !important; /* FONT COLOR */ 
  text-decoration: UNDERLINE !important; /* UNDERLINE */
  font-style: italic !important; /* ITALIC */
  font-size: 1.2em !important; /* FONT SIZE */
}

Prevent Advance Without Answer

By default the question will allow you to click on the 'NEXT' button on mobile without providing an answer. The following code will force you to provide and answer before going to the next attribute.

Add the following code to your question JavaScript

/* MOBILE SMART - PREVENT ADVANCE WITHOUT ANSWER */ 
cmJq(document).ready(function () {
    setTimeout(function () {
        cmJq('#cm-NextButton').off().click(function (event) {
            if (cmJq(event.target).hasClass('cm-button-disabled')) {
                return;
            }

            var doReturn = false;
            if (hasMobileSmart()) {
                // Assumes that all subquestions are required
                if (cmJq('.cm-mobile-smart .cm-smart-row:visible .cm-smart-button.cm-selected').length < 1) {
                    cmJq('.cm-mobile-smart-error').show();
                    return;
                } else {
                    cmJq('.cm-mobile-smart-error').hide();
                }

                var lastQuestion = goForwardOnMobileSmart();
                if (!lastQuestion) {
                    doReturn = true;
                }
                if (hasPageSplitResponses()) {
                    var lastPage = goForwardOnSplitResponses();
                    if (!lastPage) {
                        doReturn = true;
                    }
                }
            }
            if (doReturn) {
                return;
            }
            cmJq("#cmix-go").val('next');
            postSurvey('forward');
        });
    }, 50);
});

Reduce Gap Between Numeric Input Box and Label

Add the following code to your question CSS

.cm-numeric-input-container {
	width: 75px; 
}

Shrink Progress Bar to Save Room on Mobile

By default the Progress Bar spans the width of the screen when using a Mobile Smart Grid. You have some options should you want to shrink it or remove it all together. See screenshot below:

In order to save room on a mobile screen, you may want to either:

Shrink the progress bar to save room. To do so:
1. Access the Source Code Editor:
  - See Article: Source Code Editor
  - Add the following code to the Source Code Editor tied to the Question Text or Instructional Text
```
<style>.cm-progress-bar {
	width: 30% !important;
}
</style>
			
```
Remove the Progress Bar on each Mobile Smart Screen
1. You will need to turn it off on each specific page.
  - See Article: Progress Bar Settings