{"id":5110,"date":"2024-04-14T11:25:05","date_gmt":"2024-04-14T03:25:05","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5110"},"modified":"2024-04-14T11:25:05","modified_gmt":"2024-04-14T03:25:05","slug":"excess-concealed","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/excess-concealed\/","title":{"rendered":"Excess: concealed"},"content":{"rendered":"\n
\n

From time to time, elements on a page may be situated beyond the viewport, resulting in an unintended outcome of horizontal or lateral scrolling that reveals additional empty space around your layout. Not all horizontal scrolling is undesirable, but if it conflicts with your design, we will guide you on how to prevent it using Excess: concealed, adaptive design, and intentional interaction setup.\u00a0<\/p>\n

Within this tutorial, you will understand the following:<\/p>\n

    \n
  1. Reasons for excess occurrences<\/li>\n
  2. Methods to identify excess<\/li>\n
  3. Strategies to resolve excess problems<\/li>\n<\/ol>\n

    Reasons for excess occurrences<\/h2>\n

    Numerous factors can lead to unwelcome horizontal scrolling in your design, but typically it arises due to one of two reasons:\u00a0<\/p>\n

      \n
    • The design layout includes an element that is dimensioned or located in a manner that shifts it off the screen and beyond the viewport.<\/li>\n
    • Activities or animations that commence off-screen. For instance, if you have a Heading entering from the side, its initial location off the screen when the page loads may cause overflow, despite the Heading ultimately reaching the correct position after the animation completes.\u00a0<\/li>\n<\/ul>\n
      \n
      <\/div>
      An element is positioned in a manner that causes overflow by pushing it off the screen and outside the viewport.\u00a0<\/figcaption><\/figure>\n
      \n
      <\/div>
      The initial position of a Heading with an interaction applied to it starts the Heading off the screen and causes overflow.\u00a0<\/figcaption><\/figure>\n

      Excessive horizontal scrolling may arise from a different scenario than the two mentioned above, but layout and animation-related overflow usually manifest the most.<\/p>\n

      Methods to identify excess<\/h2>\n

      Horizontal scrolling is not constantly negative. Nevertheless, when checking for excessive horizontal scrolling, watch out for anything that gives the impression that your layout’s boundary (typically the right side of your design) is not working as intended. In simpler terms, seek out additional space or elements extending past the edge of your layout’s boundary during scrolling. You can assess this in the Designer <\/strong>and the published site<\/strong>.\u00a0<\/p>\n

      In the Designer<\/strong>, to identify potential unwanted horizontal scrolling:<\/p>\n

        \n
      1. Access the Designer<\/strong><\/li>\n
      2. Scroll left <\/strong>and right<\/strong> to observe any elements overflowing outside the viewport\u00a0<\/li>\n
      3. Resize the Designer<\/strong> canvas<\/li>\n
      4. Adjust the canvas size to assess responsiveness and fluidity<\/li>\n<\/ol>\n

        Note: <\/strong>If you are using a trackpad or a mobile device, scroll left and right \u2014 but with a mouse wheel, holding down Shift<\/strong> typically enables left and right scrolling.<\/p><\/blockquote>\n

        \n
        <\/div>
        You can resize the canvas by grabbing its edge to check for responsiveness and fluidity.<\/figcaption><\/figure>\n

        Learn more about creating responsive designs.<\/p>\n

        To identify unwanted excess on your published site<\/strong> (especially with interactions active):<\/p>\n

          \n
        1. Publish<\/strong> your site<\/li>\n
        2. Check if your interactions<\/strong> cause surplus space to the right of your layout (especially on mobile devices)<\/li>\n<\/ol>\n
          \n
          <\/div>
          Interactions often lead to surplus space, especially on mobile devices.\u00a0<\/figcaption><\/figure>\n

          Excess whitespace commonly arises with interactions as the browser continues to think the interaction requires the additional width that was utilized at the start of the animation even after the interaction finishes.\u00a0<\/p>\n

          Strategies to resolve excess problems<\/h2>\n

          You can prevent horizontal scrolling through various methods:<\/p>\n

            \n
          1. Utilize Excess: concealed<\/li>\n
          2. Evaluate your layout and its responsiveness<\/li>\n
          3. Be mindful of your interaction setup<\/li>\n
          4. Explore alternate solutions<\/li>\n
          5. Apply Excess: concealed to the entire page<\/li>\n<\/ol>\n

            Utilize Excess: concealed<\/h3>\n

            Establish the parent element\u2019s Overflow<\/strong> as hidden<\/strong>:\u00a0<\/p>\n

              \n
            1. Identify the element<\/strong> causing the undesired horizontal scrolling (e.g., an Image element)<\/li>\n
            2. Select its parent element<\/strong> (e.g., a Section)<\/li>\n
            3. Access Style panel<\/strong> > Size<\/strong>\u00a0<\/li>\n
            4. Set Overflow<\/strong> to hidden<\/strong><\/li>\n
            5. Scroll left<\/strong> and right<\/strong> to verify if the excess horizontal scrolling has been removed<\/li>\n<\/ol>\n
              \n
              \n
              \"The<\/figure>\n

              By setting Overflow <\/strong>to hidden<\/strong>, you conceal elements extending beyond the parent element boundaries.<\/p>\n

              <\/figure>
              Any element overflowing the parent element\u2019s boundaries (depicted as a dark rectangle around the page content) will disappear when the parent element is set to Overflow: hidden.<\/figcaption><\/figure>\n

              Please note: Position: sticky won’t function when parent elements have Overflow: hidden. <\/p><\/blockquote>\n

              Be mindful of your layout responsiveness<\/h3>\n

              Responsive design is crucial in layout creation. Although a design may be perfectly sized for one display, it could lead to content overflow on different viewport sizes.<\/p>\n

              To ensure responsiveness:<\/p>\n

                \n
              1. Click the preview<\/strong> icon in the Designer <\/strong>(e.g., click the \u201ceye\u201d icon)\u00a0<\/li>\n
              2. Resize the Designer<\/strong> canvas<\/li>\n
              3. Adjust the canvas width to test different viewport sizes<\/li>\n
              4. Return to the desktop breakpoint using the desktop<\/strong> icon<\/li>\n<\/ol>\n
                <\/figure>
                Resize the Designer canvas to test responsiveness and fluidity across various viewport widths.<\/figcaption><\/figure>\n

                You can also simulate larger displays:<\/p>\n

                  \n
                1. Access Canvas settings<\/strong> from the Designer <\/li>\n
                2. Input the display width you wish to preview<\/li>\n
                3. Exit the large display preview using the breakpoint buttons<\/li>\n<\/ol>\n
                  \"The<\/figure>\n

                  Learn more about creating responsive designs.<\/p>\n

                  Consider your interaction setup<\/h3>\n

                  Imagine you’ve applied an interaction to a Heading<\/strong>, and after completion, the Heading<\/strong> is in the correct position. However, initially, the Heading<\/strong> is off-screen, causing unwanted horizontal scrolling.<\/p>\n

                  To prevent this scrolling:<\/p>\n

                    \n
                  1. Select the parent element of the Heading<\/strong><\/li>\n
                  2. Set the parent element’s Overflow<\/strong> to hidden<\/strong><\/li>\n<\/ol>\n

                    This action hides any overflow beyond the boundary, but may clip the animation. <\/p>\n

                    <\/figure>
                    The interaction gets cut off when the wrong parent element has Overflow: hidden. Rectify this by setting Overflow: hidden on the next parent in the hierarchy.<\/figcaption><\/figure>\n

                    To retain the intended animation functionality, remove Overflow: hidden<\/strong> from the Div block<\/strong> and instead apply it to the next parent element in the hierarchy, the Section<\/strong>:<\/p>\n

                      \n
                    1. Select the parent element of the Heading<\/strong><\/li>\n
                    2. Set the parent element’s Overflow<\/strong> to visible<\/strong><\/li>\n
                    3. Choose the next parent element up (e.g., \u201cHero Section\u201d)<\/li>\n
                    4. Set the parent element’s Overflow<\/strong> to hidden<\/strong><\/li>\n<\/ol>\n

                      Now the animation works correctly, and there’s no more overflow.<\/p>\n

                      Explore other solutions<\/h3>\n

                      You can also attempt these alternatives:<\/p>\n

                        \n
                      • Use percentage-based widths and maximum widths to prevent overflow.\n
                          \n
                        1. Allotted for parent elements and restricted for child elements<\/li>\n
                        2. Utilizing background images for Sections instead of inline Image elements (for instance, if the image is decorative and supposed to appear behind text or other content, opt for a background image)<\/li>\n
                        3. Employing X-ray mode for better visualization of the boundaries of elements causing overflow (the option to toggle X-ray mode is available in Canvas settings)<\/li>\n
                        4. Browsing through your website in the Designer while positioning your cursor above the additional right side whitespace to detect the elements leading to overflow<\/li>\n<\/ol>\n

                          Explore further about the minimum and maximum dimensions along with background images.<\/p>\n

                          Apply Overflow: hidden on a whole page<\/h3>\n

                          If you are considering setting the highest element’s Overflow<\/strong> to hidden<\/strong> \u2014 the Body<\/strong> element.<\/p>\n

                          Implementing Overflow<\/strong> as hidden<\/strong> on the Body<\/strong> can truncate the remaining content on the page and hinder users from smoothly scrolling through your page beyond the initial viewport.<\/p>\n

                          If you need to enforce Overflow<\/strong> as hidden<\/strong> on an entire page, you can alternatively use a Div block<\/strong> as a wrapping element:<\/p>\n

                            \n
                          1. Access the Add panel<\/strong><\/li>\n
                          2. Drag a Div block<\/strong> onto your page beneath the Body<\/strong><\/li>\n
                          3. Transfer all<\/em> your page elements inside the Div block<\/strong> (for example, treating the Div block<\/strong> as a wrapper for all your content)<\/li>\n
                          4. Select your Div block<\/strong> wrapper<\/li>\n
                          5. Open Style panel<\/strong> > Size<\/strong> and specify Overflow<\/strong> as hidden<\/strong> (only after shifting all your content into the Div block<\/strong> wrapper)<\/li>\n<\/ol>\n
                            \n
                            \"A<\/div>\n<\/figure>\n

                            Isn’t it delightful that you have found a way to resolve your horizontal scrolling issues? Don’t keep it hidden!<\/p>\n

                            Learn more about design and overflow configurations.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Set Overflow to hidden to prevent unwanted horizontal scrolling and extra whitespace in your project when elements exist outside the viewport.","protected":false},"author":2,"featured_media":5111,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5110","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5110"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5110\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5111"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}