Odd Mobile Responsiveness in Pre-Templated Unedited Sections/Footer

[adkseorev]

Still having trouble using a lot of the templates that are available, as far as getting the mobile responsiveness right.

For example, on my site, here is what one of your footer templates (unedited) looks like when editing in cornerstone: https://imgur.com/a/IU1oTuT (note: Had to use an imgur link because uploading a simple, small jpeg to the forum wasn’t working properly).

Note on the right side that the buttons are cut off, as well as the text. The rows/columns extend out of the viewpoint.

And, it isn’t just this template, or I wouldn’t be making this (my second post about poor mobile responsiveness).

So, either the mobile responsiveness is not working properly or there is something wrong with the view window in cornerstone that I’m not able to figure out.

[adkseorev]

Also, here is another example from that same template. Look at what happens when I try to edit a simple text element in this footer: https://youtu.be/DuUmpMw3ROw

Trying multiple different ways to edit it, same result - layout shift and backend wonkiness that I have to tweak.

Here is another example from a completely different template (the most frustrating): https://youtu.be/jno6tBiOIa8

Trying to create a simple responsive footer. This is a completely templated footer with no sizing/margin/padding has been added.

[christian]

Hey Bobby,

Below are the answers to your concerns and the technical reasons why these issues are occurring in the Cornerstone editor, along with how to resolve them.

1. Why elements are cut off and overflow the viewport on mobile

This typically happens because of Flexbox wrapping or fixed sizing settings on the Row or Container level within the template:

• The Cause: By default, rows and containers in Cornerstone use Flexbox to align columns side-by-side (horizontally). If a template does not have Flex Wrap enabled, or if it uses a fixed layout (like a grid with rigid column widths), the columns will stay squeezed side-by-side on mobile, pushing them beyond the viewport boundary.

• How to fix it in Cornerstone:

  1. Click on the parent Row or Container element.
  2. Use the Breakpoint Switcher (the device icons at the top of the Cornerstone pane) to switch to the mobile view.
  3. Under the Layout options for that Row, change the Flex Direction from Row (horizontal) to Column (vertical), or change Flex Wrap to Wrap. This will force the columns to stack vertically on mobile instead of running off the screen.
  4. Ensure that the Width of the columns or elements (like buttons) is set to 100% or auto, and that they do not have large fixed widths (e.g., width: 300px or rigid margins/paddings) that exceed the mobile screen width.

---

2. Why editing text causes layout shifts and backend wonkiness

This is a known behavior related to how Cornerstone’s Inline Text Editor renders inside the live preview window:

• The Cause: When you double-click or click directly on a text element in the preview area to edit it, Cornerstone replaces the static HTML of that element with a live WordPress/TinyMCE rich-text editor wrapper. This temporary editor wrapper injects its own CSS, padding, and block properties. If your column or element relies on strict Flexbox/Grid spacing, this injected editor container disrupts the calculations, causing the layout to shift or jump around while you are typing.

• How to avoid it:

  • Avoid editing text by double-clicking it in the live preview window.
  • Instead, select the text element and edit its content inside the Inspector panel on the left sidebar (using the text input fields). Editing via the sidebar does not inject the inline editing wrappers into the preview pane, meaning the layout will remain completely stable and shift-free.

[christian]

3. Why completely unedited templates have these issues out-of-the-box

It is highly frustrating when “ready-to-use” templates don’t work seamlessly. This happens for a few key reasons:

• Structural Starting Points: Many Cornerstone templates are designed as structural starting points rather than fully finalized layouts. They often require the user to configure breakpoint behaviors explicitly for their specific header/footer configurations.
• Legacy Grid Structures: Some older templates were built using fixed layouts or older Flexbox settings that do not automatically stack columns. When imported into newer versions of Pro/Cornerstone, they require manual activation of column wrapping or layout shifting for smaller screen sizes.
• Default Grid Columns: If a template footer has 3 or 4 columns, they will automatically try to share the horizontal space. You must use the breakpoint switcher to tell Cornerstone: “When on a mobile screen, change this Row’s layout behavior to stack columns vertically.”

Hope that helps. If not, please provide the page URL with issue and detail what the problem is.

Thanks.