Terra Dotta's user interface will behave in a responsive manner, meaning it will adjust nicely on screens of all sizes.  However, public site content (program brochure pages, home page, site content pages, staff info pages) created in a WYSIWYG editor will not always become responsive automatically. The WYSIWYG content will not break or render incorrectly, it just will not adjust to smaller screen sizes in the same way as the rest of the user interface.  

This article will provide information about how to make and adjust responsive WYSIWYG content. If you do not make these adjustments, the content will still show as expected on larger screens, but require the user to scroll when viewing your site on a smaller screen.   

Some instructions provided here are easily accomplished through the WYSIWYG tools, while others do require at least a basic understanding of HTML. If you are tech-savvy, please explore more advanced options available through Bootstrap - http://getbootstrap.com/docs/3.3/css/

Images

A responsive image is one that re-sizes itself to fit the screen size so that the entire image is always visible. In the screenshot below, the top image is not responsive, while the bottom image is responsive. Notice how the top image is getting cut off on the right hand side, while the bottom image has gotten smaller in order to fit the size of the screen.



Images that are uploaded in Terra Dotta will be responsive by default. However, make note of the following:

• The max size is the size of the image that was uploaded, and it will get smaller as the screen gets smaller. For this reason, it is best to re-size the image before uploading it into the image library in Terra Dotta. Alternatively, you can upload it into the image library and use the tools there to resize the image before inserting it into a WYSIWYG. 
• The width setting overrides the responsive attribute of an image. If you upload an image and then use the 'Edit Image' icon in the toolbar to set the width or height, the image will always display at that pre-defined width or height. This is another reason we recommend re-sizing the image before uploading it. For an image that should span the entire width of a content, the recommended width of the image is ~850px wide if it displays next to the left hand navigation menu, or ~1100px wide if it displays under the left hand navigation menu.  At this width, the image will display nicely on the largest size viewport, and re-size itself for smaller screens.

Centering images: 

When a site is using the responsive public pages, images that appear centered in the WYSIWYG editor are not always centered when looking at the actual page or program brochure.
 
In order to make the image display in the center of the page, follow these steps:
 

-Go to that WYSIWYG editor 
-Highlight the image and click the 'Image' icon (the one that looks like a Polaroid picture with a little green + sign) 
-Click the 'Advanced' tab 
-Enter the following into the 'Style' field: 
display:block; margin-left:auto; margin-right:auto 

 
Why is this necessary?
Within the responsive framework, <img> tags are considered 'inline' elements so you have to override the display style to change it to a 'block' element and then you can declare the left and right margin properties.
  
If an image was inserted into the WYSIWYG editor before the Terra Dotta 16.0 upgrade, the image is not responsive by default. There are two options for making an image responsive:

Go to the WYSIWYG editor, select the image, click the 'Edit Image' icon in the WYSIWYG toolbar, go to the 'Advanced' tab, and "add img-responsive" to the stylesheet classes field. 

Go to the WYSIWYG editor, delete the image that was uploaded prior to the 16.0 upgrade, and re-add the image. This will automatically add the 'img-responsive' attribute to the image.

Basic Table Styling Attributes 

• Striped Rows (Rows will display with alternating white and gray background)
  • Table Properties -> Advanced tab
  • Enter table-striped in the Stylesheet Classes field 

• Bordered (Adds a thin line border around the table)
  • Table Properties -> Advanced tab
  • Enter table-bordered in the Stylesheet Classes field

• Hover (Rows will change color as the user's cursor hovers over them)
  • Table Properties -> Advanced tab
  • Enter table-hover in the Stylesheet Classes field
• Header Row or Column (Cells in the header row or column will automatically appear in bold font)
  • Table Properties
  • Change the 'Headers' field to First Row, First Column, or Both

• Condensed (Reduces the default amount of cell padding used in the table)
  • Table Properties -> Advanced tab
  • Enter table-condensed in the Stylesheet Classes field

• ​Panel (Creates a border around the table that matches the site's primary color and has a drop shadow)
  • Not available on the "Bootstrap CSS" tab - must be added manually
  • Click the 'Source' icon in the WYSIWYG toolbar
  • In the code, before the table, enter <div class="panel panel-primary">
  • After the table code, end the div by entering </div>

• Click the 'Source' icon in the WYSIWYG toolbar
• In the code, after the panel-primary div and before the header row, enter <div class="panel-heading">
• After the panel heading text, end the div by entering </div>