Control what happens when elements like images, text or buttons overflow the borders of a parent container. Overflow control works for regular containers, sections, repeaters and layouters. Select a section or container to control the overflow behaviour from the Inspector panel.
Check out the horizontal scroll here and resize the browser to see what happens.
Check out the horizontal scroll here.
Sections and containers are set to Show by default so that when content flows outside, it’s still visible on the site.
You can choose to hide content if it flows outside the borders of its parent container, which means that site visitors won’t see it.
Showing on scroll.
To enable content to scroll, add all the content to the section or container and set overflow to Scroll. Then choose the direction you want the content to flow in, either Vertical, Horizontal or Both. You can hide the scrollbar using the blue toggle.
TRY IT YOURSELF
Exercise on overflow content.
Open Academy X from desktop to complete this exercise.
Create an overflow. Select the text in the container. Click Edit Text and set font size to 40px. You’ll notice that the text is too long and flows outside of the container on smaller breakpoints.
Hide content. Click the container. The Inspector panel will open on the right. If it doesn’t, click the Inspector icon in the top right corner. Under Overflow content, select Hide. Use the drag handles to resize and notice that some of the content is clipped and you can’t see it.
Show content on scroll. Go back to the Inspector panel and under Overflow content, choose Scroll. Now set the Scroll direction to Vertical. Click Preview in the top right corner. Click Viewport in the top bar and a dropdown will open. Preview how the text looks on all breakpoints. Scroll vertically over the content to read more.
The rest is up to you.