University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Content Optimization Container

Control where content is positioned on a page depending on whether the visitor is using a large-resolution device such as a desktop computer or iPad, or a screen that is smaller than 720 pixel width, such as a smartphone.

The component as it is first displayed on the page.

The component as it is first displayed on the page.

Using This Component

Add the component to the page.

The container loads with two bars, Content Optimization Container and Content Optimization Container End. The initial bar has two tabs: Content Optimization and Content Order and Placement.

Paired sets of these containers are required if you want content to shift between two places on the page for different devices.

If you want the content to switch between two places on your page, you will need two containers, one for each size of display ('mobile' versus 'normal'). If you want the content to be visible on only one size of display, just one container is needed.

Once this component is on your page, you can then add additional components within it, such as Body Text, Photos or Lists. Simply drag and drop new components right between the two gray bars as you would for a Form Container.

If you delete the start or end component, both will be removed, but the content will remain on your page (like a Form or Column Control component).

The Content Optimization Container can be used on a non-RWD-enabled site to wrap other components with an ID or class. However, the content will always behave as if the device is a desktop (hide in normal layout will always be hidden, hide on mobile layout will never hide, and there will never be any repositioning).

Component Optimization tab

ID: Identify the container for use in other coding. This will be added to the opening element.

CSS Classes: Specificy additional style information. This will be added to the opening element.

Opening HTML: Add additonal coding. (By default these are coded as <div>.) The HTML will be applied to components in the container and closing HTML will be automatically generated. Classes and ID are added to the opening element.

Visibility

  • Normal visibility (default): do nothing.
  • Hide in normal layout: do not display this block of content on a larger (720 pixel plus) display device. (Also will be hidden in On This Page.)
  • Hide in mobile layout: do not display this content on a small (under 720 pixel) display device. (Also will be hidden in On This Page.)

Description: Enter a label visible in Author to identify the purpose of your container for the benefit of other authors. This label will appear on both elements.

The component opened for editing showing the Content Optimization tab.

The component opened for editing showing the Content Optimization tab.

Content Order and Placement tab

Set Name: To allow content to jump between two locations, depending on the device display size, both containers must have the identical Set Name. (One will also be set as Visibility: 'Hide in Normal,' while the other will be set as 'Hide in Mobile.')

Weight: Enter a value to allow the browser to adjust the location of the content on your page. Content with a lower 'weight' will be repositioned above content with a higher value. (This is optional.)

The Content Optimization Container opened for editing showing the Content Order and Placement tab.

The Content Optimization Container opened for editing showing the Content Order and Placement tab.

Previewing Your Changes

You will need to switch to the Author environment's Preview Mode to see how your page will change.

  • If your site is not RWD-enabled, first turn on the RWD Preview tool.
  • Then switch to Preview Mode (click the magnifying glass icon in the Sidekick).
  • Resize the width of your browser window until it is narrow enough to switch to RWD mode.  

Restrictions

  • We do not recommend nesting pairs of these containers. We have encountered some problems when page content was subsequently revised and the containers became disconnected. Please proceed with caution if you explore this path.

Developers only!

Instead of nesting these containers, try to achieve the same results using the Opening HTML setting to place your code. 

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See an Example:

Tip: Learn more about making your site mobile-ready using Responsive Web Design.

Last Reviewed:

October 15, 2015