If you have come to this page directly, please start with the Overview page for some important information.

To make your gallery report responsive, open the DataPage in edit mode and go to gallery field configuration screen. If the gallery doesn’t currently have a header/footer, insert them into your DataPage, otherwise the code goes to the bottom of the current content of your header/footer.

The HTML Editor (WYSIWYG toolbar) should not be enabled. If it is enabled, go to the Advanced tab of the header/footer and disable it. If the Advanced tab is not visible, go to the beginning steps of your DataPage and enable Advanced options.

Note that if your gallery DataPage also includes a search form or a details page, you must follow the responsive steps for Forms for those two screens. The steps on this page are only for the gallery screen.

Copy the code below and paste it into the header of your results page:

<!-- Responsive Code Begin -->
<style>

@media (max-width: 768px) { 

  #gallery-single * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  #gallery-single table[id^="PageActionsCtnr"] {
    border-spacing: 0px !important;
    border-collapse: separate !important; 
  }

  #gallery-single table[id^="PageActionsCtnr"] td {
    display: block;
    width: auto!important;
    float: left;
    text-align: left;
    padding: 1px !important;
  }

  #gallery-single table[id^="PageActionsCtnr"] td div {
    text-align: left !important;
  }

  #gallery-single table[data-cb-name^="cbTable"] {
    border-spacing: 0px !important;
    border-collapse: collapse !important; 
    margin-bottom: 7px;       
  }

  #gallery-single table[data-cb-name^="cbTable"] td {
    display: block;
    width: 100% !important;
    float: left;
    text-align: left;
    margin-top: 10px;   
  }

  #gallery-single table[data-cb-name^="cbTable"] td div {
    text-align: left !important;    
  }

  #gallery-single table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"], 
  #gallery-single table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"]:hover { 
    vertical-align: middle !important;
    white-space: normal !important;
    background: transparent !important;
    overflow: hidden !important;
    display: inline-block !important;
    padding: 0px !important;      
    margin: -6px 12px 8px 12px !important; 
    line-height: 0px;
    position: static !important;
    width: auto !important;
    opacity: 1.0 !important;
  }
  
}
</style>
<div id="gallery-single">
<!-- Responsive Code End -->

Copy the code below and and paste it into the footer:

<!-- Responsive Code Begin -->
</div>
<!-- Responsive Code End -->