header-logo
Learn how to use Wix to build your site and business.
Design and manage your site using intuitive Wix features.
Manage subscriptions, plans and invoices.
Run your business and connect with members.
Learn to purchase, connect or transfer a domain to your site.
Get tools to grow your business and web presence.
Boost your visibility with SEO and marketing tools.
Get advanced features to help you work more efficiently.
Find solutions, learn about known issues or contact us.
placeholder-preview-image
Improve your skills with our courses and tutorials.
Get tips for web design, marketing and more.
Learn to increase organic site traffic from search engines.
Build a custom site using our full-stack platform.
Get matched with a specialist to help you reach your goals.
placeholder-preview-image

Studio Editor: Working with Overflow Content

4 min
In this article
  • Setting overflow content in sections and containers
  • Setting overflow content on pages
  • FAQs
Some site elements and content may be too large for their page, section, or container, and flow outside the edges. You can set how overflow content behaves on specific sections or containers, or on an entire page.
Using Safari as your browser?
Hiding overflow content from your container, section or page is only supported from version 16 and up.

Setting overflow content in sections and containers

Choose how you want overflow content to look on page sections and containers. You can hide /show the content, or set the overflow to show on scroll.

To set your overflow content in sections and containers:

  1. Click the relevant container or section.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Scroll down to Layout.
  2. Select the relevant option under Overflow content:
    • Show: Overflow content is displayed on your client's site, even if it is too large for the page. A scroll bar is automatically added so visitors can see the rest of the content. 
    • Hide: Overflowing elements are clipped to maintain the page's edges.
    • Scroll: Visitors can view the overflow content by scrolling.
      • Scroll direction: Select whether visitors can view the content by scrolling horizontally, vertically, or both.
      • Show scrollbar: Click the toggle to show / hide the scrollbar on your client's site.
The overflow content settings of a container. Scroll has been selected, and the cursor is enabling the scrollbar.

Setting overflow content on pages

You can hide or show content overflow on your site page to suit your design needs. As the content flows outside the page edges, a scrollbar is automatically added.

To set your overflow content on pages:

  1. Select the page layer from either: 
    • The Layers  panel.
    • The breadcrumbs at the bottom left of the editor.
  2. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Scroll down to Layout.
  2. Select the relevant option under Overflow content:
    • Show: Overflow content is displayed on your client's site, even if it is too large for the page. A scroll bar is automatically added so visitors can see the rest of the content. 
    • Hide: Overflowing elements are clipped to maintain the page's edges.
the 'overflow content' dropdown in the Inspector panel, next to the studio editor canvas

FAQs

Select a question to learn more about overflow content
A screenshot of opening the Inspector panel in the Studio Editor.
The overflow content settings of a container. Scroll has been selected, and the cursor is enabling the scrollbar.
A screenshot of opening the Inspector panel in the Studio Editor.
the 'overflow content' dropdown in the Inspector panel, next to the studio editor canvas