How to Fix Display and Responsive Issues in Thrive Architect

In this article, you’ll learn how to fix display and responsive issues in Thrive Architect. These issues include horizontal scrolling on mobile devices and the “Some content types will not be displayed” warning that appears in the editor. Both are common scenarios with straightforward solutions.

---

Display issues typically arise from elements that exceed the viewport width on smaller screens, while the content warning is an informational message about third-party shortcodes and widgets that do not render inside the editor preview.

Fixing Horizontal Scrolling on Mobile

Horizontal scrolling occurs when one or more elements on your page are wider than the device’s viewport. This creates an unwanted left-right scroll that makes the page feel broken on mobile phones and tablets.

Common Causes of Horizontal Scrolling

Several design choices can cause elements to overflow the viewport on mobile devices:

• Fixed-width elements — Elements with a width set in pixels (such as 600px) that exceed the mobile screen width (typically 375px on phones)
• Oversized images — Images that do not scale down because they lack responsive sizing or have a fixed width applied
• Negative margins — Elements with negative left or right margins that push content outside the viewport boundaries
• Content overflow — Long URLs, unbroken text strings, or preformatted code blocks that do not wrap and extend beyond the screen edge
• Columns with fixed widths — Column layouts where individual columns have pixel-based widths that do not collapse on smaller screens
• Full-width elements inside narrow containers — Elements set to a width larger than their parent container

Step 1: Identify the Overflowing Element

Before you can fix horizontal scrolling, you need to find which element is causing the overflow.

Method 1: Use the Responsive Preview in Thrive Architect

1. Open the page in the Thrive Architect editor.
2. At the bottom of the editor, click the mobile phone icon in the responsive preview toolbar to switch to mobile view.
3. Scroll through the page and look for elements that extend beyond the right edge of the mobile preview area.
4. Click on any element that appears to overflow and check its width settings in the left sidebar.

Method 2: Use Your Browser’s Developer Tools

1. Open the published page in your browser.
2. Press F12 (or Ctrl+Shift+I on Windows, Cmd+Option+I on Mac) to open developer tools.
3. Click the device toggle icon (a phone and tablet icon in the top-left corner of the developer tools panel) to switch to responsive mode.
4. Set the viewport to a mobile width (such as 375px).
5. Right-click on the page and select Inspect to examine elements near the right edge.
6. Look for elements with a computed width greater than the viewport or with overflow properties that allow content to spill out.

Tip: In Chrome developer tools, elements causing overflow are sometimes highlighted with a scrollbar. You can also temporarily add the CSS rule * { outline: 1px solid red; } in the developer console to visualize all element boundaries.

Step 2: Fix Fixed-Width Elements

If an element has a width set in pixels that exceeds the mobile viewport:

1. Select the element in the Thrive Architect editor.
2. Switch to the mobile responsive view using the bottom toolbar.
3. In the left sidebar, find the Layout section.
4. Change the Width value from a fixed pixel value to a percentage (such as 100%) or a responsive unit (such as vw).
5. Alternatively, set a Max Width of 100% so the element never exceeds its container.

Step 3: Fix Oversized Images

Images that do not resize on mobile can cause horizontal scrolling.

1. Select the Image element in the editor.
2. Switch to the mobile responsive view.
3. In the left sidebar, check the image’s width settings.
4. Set the Width to 100% or auto so the image scales to fit its container.
5. Ensure the image’s Max Width is set to 100% if a fixed pixel width is needed on desktop.

Step 4: Fix Negative Margins

Negative margins can push elements outside the viewport.

1. Select the element with the suspected negative margin.
2. In the left sidebar, open the Layout section.
3. Check the Margin values on the left and right sides.
4. If negative values are set, change them to 0 or a small positive value on the mobile responsive view.

Step 5: Fix Content Overflow

Long text strings, URLs, or code blocks that do not wrap can cause horizontal scrolling.

1. Select the Text element or container holding the overflowing content.
2. If the content is a long URL or unbroken string, consider adding manual line breaks or shortening the text on mobile.
3. For code blocks or preformatted text, add the CSS rule overflow-x: auto to the element using the HTML Attributes panel (add a custom class) and a corresponding CSS rule in Thrive Dashboard > Custom CSS.

Step 6: Verify the Fix

After making adjustments:

1. Switch between all three responsive views (desktop, tablet, and mobile) in the Thrive Architect editor to verify the layout.
2. Save your work and preview the published page on an actual mobile device or using your browser’s responsive mode.
3. Scroll the page to confirm there is no horizontal scrolling.

Understanding the “Some Content Types Will Not Be Displayed” Warning

When editing a page in Thrive Architect, you may see a warning message that reads: “Some content types will not be displayed.” This message appears as a notice within the editor canvas.

What This Warning Means

This warning indicates that the page contains content generated by third-party shortcodes, widgets, or plugin output that cannot be rendered inside the Thrive Architect editor preview. These content types require the full WordPress front-end environment to display, which is not fully available inside the visual editor.

What Content Triggers This Warning

The warning is triggered by:

• Third-party plugin shortcodes — Shortcodes from plugins such as contact form plugins, gallery plugins, e-commerce plugins, or membership plugins that generate complex HTML and JavaScript output
• WordPress widgets — Sidebar widgets or widget-area content embedded on the page
• Dynamic content from other plugins — Output from plugins that relies on front-end JavaScript, AJAX calls, or specific page-load conditions to render

This Is Not an Error

Important: This warning does not indicate a problem with your page. The content that triggers this warning will display correctly on the published front-end page. The warning is purely informational — it tells you that certain content cannot be previewed inside the editor but will work as expected when visitors view the page.

What to Do When You See This Warning

1. Ignore the warning if you know the page contains third-party shortcodes or widgets. The published page will display all content correctly.
2. Preview the page by clicking the Preview button in the bottom toolbar to see how the page looks on the front end, including the third-party content.
3. Do not delete the element that shows the warning unless you intentionally want to remove that content. The shortcode or widget is still present and functioning even though it does not render in the editor.

How to Preview Third-Party Content

To verify that the third-party content displays correctly:

1. In the Thrive Architect editor, click the Preview button in the bottom-left toolbar.
2. The page will open in a new tab showing the published version, including all shortcode and widget output.
3. Alternatively, save your work, exit the editor, and view the page as a regular visitor.

Frequently Asked Questions

Why Does My Page Scroll Horizontally on Mobile but Look Fine on Desktop?

Desktop screens are wide enough to accommodate fixed-width elements, but mobile screens are much narrower (typically 375px). Elements with pixel-based widths that exceed the mobile viewport cause horizontal scrolling. Always check your designs in the mobile responsive view.

Can I Fix Horizontal Scrolling Without Editing Every Element?

You can add a global CSS rule to prevent horizontal overflow on the body element. However, this hides the overflowing content rather than fixing the underlying layout issue. It is better to identify and fix the specific elements causing the overflow for a proper solution.

Will the “Content Not Displayed” Warning Affect My SEO?

No. The warning only appears in the Thrive Architect editor. It does not affect the published page, its content, or how search engines index it. All content renders normally on the front end.

Why Do Some Shortcodes Show in the Editor but Others Do Not?

Simple shortcodes that generate static HTML can often be previewed in the editor. Complex shortcodes that rely on JavaScript, AJAX, or specific page-load conditions cannot render inside the editor environment and will trigger the warning.

Related Resources

• Responsive Design: How to Use Responsive Design Options — Configuring element styles for desktop, tablet, and mobile views
• Editor Loading Issues: How to Fix Editor Loading and Editing Issues in Thrive Architect — Troubleshooting editor loading, missing sidebar, and editing problems
• Layout and Position: How to Use Layout and Position Options — Controlling width, margins, padding, and overflow behavior
• Shortcodes: How to Use Shortcodes in Thrive Architect — Inserting and managing third-party shortcodes on your pages

That’s it! You’ve successfully learned how to fix display and responsive issues in Thrive Architect. By identifying overflowing elements and adjusting their widths to responsive units, you can eliminate horizontal scrolling on mobile devices. And by understanding that the “Some content types will not be displayed” warning is purely informational, you can confidently continue building pages that include third-party content.