Adjust content or layout for small-screen devices.
Last reviewed: May 17, 2022
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.
Note: this component is sometimes called an "appendAround".
If you only wish to hide some content in one view (e.g. for mobile users), only one container is needed.
If you only wish to hide some content from people using one size of display, just one container is needed. But 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'), and both must have the same Set Name.
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).
Instead of nesting these containers, try to achieve the same results using the Opening HTML setting to place your code. Developers only!
Click the wrench icon to 'configure' these settings.
ID: Identify the container for use in other coding. This will be added to the opening element. (This is NOT used to identify paired containers. For that, use the Set Name setting.)
CSS Classes: Specify additional style information. This will be added to the opening element.
Opening HTML: Add additional 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.
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.
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.)
To see how how your page will change for a small screen device like a smartphone, switch to Preview Mode, and manually reduce the width of your browser window. Once it falls below the cutoff point, it will automatically switch to small-screen mode.
You can also use the handy Emulator (mobile device simulator) to predict how your site will look in popular device screen sizes.
Tip: Learn more about making your site mobile-ready using the Emulator (mobile device simulator).