There are two options for making an image responsive: If an image was inserted into the WYSIWYG editor before the Terra Dotta 16.0 upgrade, the image is not responsive by default. Within the responsive framework, 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. Enter the following into the 'Style' field:ĭisplay:block margin-left:auto margin-right:auto Highlight the image and click the 'Image' icon (the one that looks like a Polaroid picture with a little green + sign) In order to make the image display in the center of the page, follow these steps: 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. At this width, the image will display nicely on the largest size viewport, and re-size itself for smaller screens. 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. This is another reason we recommend re-sizing the image before uploading it. 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. The width setting overrides the responsive attribute of an image.Alternatively, you can upload it into the image library and use the tools there to resize the image before inserting it into a WYSIWYG. For this reason, it is best to re-size the image before uploading it into the image library in Terra Dotta. The max size is the size of the image that was uploaded, and it will get smaller as the screen gets smaller.Images that are uploaded in Terra Dotta will be responsive by default. 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. If you are tech-savvy, please explore more advanced options available through Bootstrap - Ī 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. Some instructions provided here are easily accomplished through the WYSIWYG tools, while others do require at least a basic understanding of HTML. 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. This article will provide information about how to make and adjust responsive WYSIWYG content. 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. 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. Terra Dotta's user interface will behave in a responsive manner, meaning it will adjust nicely on screens of all sizes.
0 Comments
Leave a Reply. |