Question Styling: Simple Grid - Mobile Smart

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


Background

You may want to update the styling of your Mobile Smart Simple Grids. This article will provide you CSS you can add either on a specific question or on theme level. See the articles below if you have not already. 


Attribute Text Styling

Above is the default format/styling for the 'Attribute' rated. Add the code below to the '+ CSS' field and adjust as needed to format this specific item. 

/* SIMPLE GRID MOBILE SMART ATTRIBUTE */
.mobile-smart__q-item_title {
    BORDER: 1PX SOLID #AAA;
    BORDER-RADIUS: 10PX 10PX 0PX 0PX;
    TEXT-ALIGN: CENTER;
    FONT-WEIGHT: BOLD;
    BACKGROUND: #EEE;
    PADDING: 5PX;
}

Individual Response Items

Above is the default format/styling for the 'Individual Response' options. Add the code below to the '+ CSS' field and adjust as needed to format this specific item. 

/* SIMPLE GRID MOBILE SMART INDIVIDUAL RESPONSES */ 
.cm-simple-grid__mobile-smart .mobile-smart__response {
    background: whitesmoke;
    margin-bottom: 2px;
    border: 1px solid #aaa;
    box-shadow: 0px 0px 5px 0px #aaa;
    border-radius: 5px;
}

Full Response List

Above is the default format/styling for the 'Individual Response' options. Add the code below to the '+ CSS' field and adjust as needed to format this specific item. 

/* SIMPLE GRID MOBILE SMART RESPONSE LIST */ 
.cm-simple-grid__mobile-smart .mobile-smart__q-item_content {
    padding: 0.5em;
    margin-bottom: 1em;
    BORDER-LEFT: 1PX SOLID #AAA;
    BORDER-RIGHT: 1PX SOLID #AAA;
    BORDER-BOTTOM: 1PX SOLID #AAA;
    BORDER-RADIUS: 0PX 0PX 10PX 10PX;
    BOX-SHADOW: 0PX 0PX 5PX 0PX #AAA;
}

Overall Simple Grid Mobile Smart Themes

Add the corresponding CSS below to the 'Survey Theme' as needed and ALL Mobile Smart Grids will be formatted the same way. 

------------------------
Example 1:

/* MOBILE SMART THEME CSS */ 
  /* SIMPLE GRID MOBILE SMART ATTRIBUTE */
  .mobile-smart__q-item_title {
      BORDER: 1PX SOLID #AAA;
      BORDER-RADIUS: 10PX 10PX 0PX 0PX;
      TEXT-ALIGN: CENTER;
      FONT-WEIGHT: BOLD;
      BACKGROUND: #EEE;
      PADDING: 5PX;
  }
  /* SIMPLE GRID MOBILE SMART INDIVIDUAL RESPONSES */ 
  .cm-simple-grid__mobile-smart .mobile-smart__response {
      BORDER-BOTTOM: 1PX SOLID #EEE;
      MARGIN-RIGHT: 10PX;
      PADDING: 5PX;
  }
  .cm-simple-grid__mobile-smart [type="radio"]:not(:checked) + label, 
  .cm-simple-grid__mobile-smart [type="radio"]:checked + label {
      vertical-align: top;
      line-height: 24px;
      padding-left: 32px;
      height: AUTO;
  }
  /* SIMPLE GRID MOBILE SMART RESPONSE LIST */ 
  .cm-simple-grid__mobile-smart .mobile-smart__q-item_content {
      padding: 0.5em;
      margin-bottom: 1em;
      BORDER-LEFT: 1PX SOLID #AAA;
      BORDER-RIGHT: 1PX SOLID #AAA;
      BORDER-BOTTOM: 1PX SOLID #AAA;
      BORDER-RADIUS: 0PX 0PX 10PX 10PX;
      BOX-SHADOW: 0PX 0PX 5PX 0PX #AAA;
  }

------------------------
Example 2:

/* MOBILE SMART THEME CSS */ 
  /* SIMPLE GRID MOBILE SMART ATTRIBUTE */
  .mobile-smart__q-item_title {
      BORDER: 1PX SOLID #AAA;
      BORDER-RADIUS: 10PX 10PX 0PX 0PX;
      TEXT-ALIGN: CENTER;
      FONT-WEIGHT: BOLD;
      BACKGROUND: #fff;
      PADDING: 5PX;
  }
  /* SIMPLE GRID MOBILE SMART INDIVIDUAL RESPONSES */ 
  .cm-simple-grid__mobile-smart .mobile-smart__response {
      BORDER-BOTTOM: 1PX SOLID #ccc;
      MARGIN-RIGHT: 10PX;
      PADDING: 5PX;
  }
  .cm-simple-grid__mobile-smart [type="radio"]:not(:checked) + label, 
  .cm-simple-grid__mobile-smart [type="radio"]:checked + label {
      vertical-align: top;
      line-height: 24px;
      padding-left: 32px;
      height: AUTO;
  }
  /* SIMPLE GRID MOBILE SMART RESPONSE LIST */ 
  .cm-simple-grid__mobile-smart .mobile-smart__q-item_content {
      padding: 0.5em;
      margin-bottom: 1em;
      BORDER-LEFT: 1PX SOLID #AAA;
      BORDER-RIGHT: 1PX SOLID #AAA;
      BORDER-BOTTOM: 1PX SOLID #AAA;
      BORDER-RADIUS: 0PX 0PX 10PX 10PX;
      BOX-SHADOW: 0PX 0PX 5PX 0PX #AAA;
      BACKGROUND: #eee;
  }

------------------------
Example 3:

/* MOBILE SMART THEME CSS */ 
  /* SIMPLE GRID MOBILE SMART ATTRIBUTE */
  .mobile-smart__q-item_title {
      BORDER-top: 5PX double #AAA;
      PADDING: 5PX;
      font-weight: bold;
      text-align:center;
  }
  /* SIMPLE GRID MOBILE SMART INDIVIDUAL RESPONSES */ 
  .cm-simple-grid__mobile-smart .mobile-smart__response {
      BORDER-BOTTOM: 1PX SOLID #EEE;
      MARGIN-RIGHT: 10PX;
      PADDING: 5PX;
  }
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us