Adjust Spacing Best Practices

If you place an image or video content at the top of a page, you might encounter display problems on mobile devices. This article shows you how to solve that display problem with a Spacer Component. 

• The instructions below show how to use a Spacer Component to fix a video display problem. The same solution works for images as well.

1 Problem 

Here is an example of the problem. We placed a Youku Component on a page just below the header, added the video URL, and then previewed the display.

The video displays properly on desktop monitors, but it does not display well on phones. The image below shows page preview for phones. In the image, the header (with a semi-transparent background) sits on top of the video content.

2  Best practice

The easiest fix is to drag a Spacer Component to the web page and place it between the header and the video component. The key step is to set the Spacer Component to display only on mobile devices. In this way, the spacer will not affect the display on desktop monitors.

The image below shows the fixed display. The Spacer Component is not visible, but it pushes the video component down and away from the header. In this example, the Spacer Component height was set to 240 px.

2.1 Customising the spacer component

You need to change two settings on the Spacer Component.

1. Drag the Spacer Component on to a web page and then place it between the Youku Component and header.
2. Hover the mouse pointer on the Spacer Component. The toolbar bar displays.
3. Click the Settings button in the top left corner. The Settings panel displays.
4. Adjust the height. 

5. Click the Advanced tab. 
6. On the Component Visibility line, click the phone icon. 

7. Click OK. The spacer is now active on mobile devices but has no effect on desktop monitors.
8. On the Edit Content page, click Preview and inspect the display on phones.
9. Adjust the Spacer Component height as required.