This walkthrough is for Fluid Engine block sections on Squarespace 7.1. Confirm the editor before trying a fix: Fluid Engine shows an Add Block button and a placement grid. Classic editor sections, collection layouts, and 7.0 templates use different controls. Check your editing experience.
Remove extra space on mobile
First locate the space. A gap below the last block, padding around the section, and blank lines inside a text block can look alike. Changing every section's padding will not reliably fix all three.
- Open the phone layout. Edit the page, choose Mobile View, and select the affected section. Check the outlines of every block, including decorative shapes and empty text.
- Check the last occupied row. If the grid continues below it, open Edit Section, then Design, and reduce Row Count to fit the actual content. The blue row-height handle is another way to adjust it. Do not crop space needed by a long block.
- Inspect space inside the block. A tall text box or empty paragraphs need attention within that block. Trim blank lines and check the block's own height and alignment.
- Check the section height. Fill Screen can add space beyond the grid. If a short section should fit its content, review that setting. Treat this as a shared section change and check desktop too.
- Save and compare. Exit editing, reopen the saved page, and check both views. Try a narrower phone width and your longest real text before keeping the change.
Row Count is not the Gap control. Row Count can differ between the desktop and mobile layouts. The section's Gap, Fill Screen, height, and alignment settings are shared. A change made while viewing a phone can still affect desktop.
A saved test, with the desktop checked too
On our separate Squarespace 7.1 test page, we deliberately added unused rows below one text block. Fill Screen was off. We saved a mobile layout with 12 rows, then reduced it to the 2 rows the block occupied. No Custom CSS was added.
At the same 413-pixel content width, the saved section went from about 515 pixels tall to 165 pixels. The desktop section remained about 374 pixels tall at a 1,153-pixel content width. Both views fit their document width. These are measurements from this fixture, not target sizes for your page.
Stop blocks from overlapping
Look at the block outlines, not just the visible text. Two blocks can occupy the same grid area even when the short version of your copy seems to fit. A longer heading, a different font, or an expanded accordion can reveal the collision.
In Mobile View, give each block enough height, move the next block clear of it, and check the order. Try the final content before adjusting decorative spacing. If the overlap is inside one text block, check line height and remove old fixed-height or negative-margin CSS before moving the surrounding layout.
Turn desktop columns into a readable sequence
An image-and-text pair needs an intentional reading order on a phone. Arrange the mobile blocks in that order, then inspect the space between them. Changing a section wrapper to flex or grid with a generic snippet can compete with Fluid Engine's own placement rules.
Keep related blocks together with Stacks
Squarespace now has native Stacks. They group blocks and provide controls for order, alignment, and gaps. Try them when a heading, paragraph, and button should move together. Start with one group and test a long title and a long paragraph before repeating the pattern. A card that matches its neighbors at one width still needs a phone check.
Know which edits also change desktop
Fluid Engine supports separate block arrangement and sizing for mobile. The content is still shared: editing a paragraph or changing a button's link affects both layouts. Some block Design settings support mobile overrides, while others do not. Check the current mobile editing rules.
Make one change, switch to desktop, and inspect it before continuing. If you meant to change mobile placement but rewrote the content, Undo is the right first step. Duplicating all the content into a second section creates two versions to maintain and is usually unnecessary.
Hide a block without deleting it
For a supported Fluid Engine block, switch to the intended view, open Layers, and use its eye control. Check the saved layout and the remaining grid space. Hiding a block does not mean you should delete it, and it does not make the content private. This is a block-level control; do not assume it hides an entire section. Native block visibility instructions.
Fix sideways scrolling at its source
Open the saved page at a narrow width. Look for the first item that extends past the right edge: a table, widget, unbroken URL, image, or a custom section. Temporarily remove only the newest related rule in your test copy, then check again.
A blanket body { overflow-x: hidden; } can conceal clipped buttons and text. Correct the offending element's width or containment instead. Be particularly careful with fixed pixel widths and 100vw inside padded containers.
Keep a wide table usable
If a table genuinely needs more room than a phone provides, put it in its own horizontally scrollable wrapper. Keep the rest of the page at the screen width. Give the scroll region a useful accessible name and keyboard access, and preserve table headers. Apply the rule to that table's wrapper, not every Code Block on the site.
Separate readable text from full-width artwork
A background can reach the edges while its text stays comfortably inset. Check the section and block settings before overriding every .content-wrapper. Use a block-specific rule only for the element that actually needs different sizing.
Check image crop separately from width
A tall mobile banner and a wide desktop banner cannot show the same crop in the same way. Check the image focal point and section height before forcing a viewport-wide box. Keep meaningful text as real page content rather than baking it into an image. Background image sizing and cropping.
Other layout changes, without broad overrides
These starting points replace older recipes that changed shared wrappers across the site. Use a duplicate section or a test page for experiments, and keep the original until the saved result works.
Center content within a section
With Fill Screen enabled, the section editor provides top, center, and bottom alignment for the extra space outside the grid. We confirmed these controls in our 7.1 fixture. Decide whether the section needs that extra height before centering its content. Section alignment settings.
Align content inside a block
Block alignment and section alignment solve different problems. A tall block can have empty space inside its outline even when the section grid is compact. Inspect the block's vertical alignment before adding section padding; the native Text Block toolbar in our test exposed an Align Vertically control.
Add a divider between sections
Check the section's native Divider option before adding pseudo-elements to every section. Review its shape, colors, and the transition to the next section at both widths. A divider is decoration, so it should not cover a link or make text harder to read. Section styling options.
Keep a block visible while scrolling
Fluid Engine now supports native block pinning. Select a block, use Pin, and choose its alignment and offset. It stays pinned within its section, and mobile pinning is configured separately. Check the available scroll room and fixed-header clearance. Native block pinning. This feature was researched for this guide, not included in our row-count test.
Add background movement
Start with the effects available for your actual section and image. A fixed background rule is not a reliable, universal mobile parallax implementation. Keep the message readable with motion disabled, and check the saved result on the browsers you support before using an effect as part of the design.
Build an uneven image-and-text layout
Use Fluid Engine placement or a Stack to compose the actual blocks. Then arrange a sensible mobile sequence. A rule on .content-wrapper does not automatically turn its nested blocks into direct grid children, so generic column recipes can miss the elements they claim to rearrange.
Make room for an expanded accordion
Check the accordion's native design controls, then open the longest answer. Verify that the next block moves or has enough space. A closed accordion preview is not a useful test of the expanded layout. If custom spacing is needed, identify that block before writing a selector.
Make a gallery work without hover
A phone visitor needs to understand and use the gallery without hovering. Keep essential labels and navigation available in its supported mobile behavior. Test tap targets and lightbox controls before adding a decorative overlay.
Adjust gallery columns and spacing
Identify whether you have a Gallery section or a Gallery Block, then inspect that layout's settings. Different gallery types use different markup and mobile rules. A selector copied for an older grid gallery is not a site-wide gallery control. Squarespace's mobile gallery behavior.
Keep gallery captions useful
Check the caption on the saved phone layout, including in the lightbox if you use one. Some gallery formats omit captions or thumbnails at smaller sizes. If a caption contains essential context, provide that context as ordinary text as well. Gallery layout differences.
Before you call it finished
- Save, exit editing, and check the actual page. The selected block outline is not the visitor's view.
- Check desktop, a narrower browser, and a phone. Read the longest heading and open every expandable item near the change.
- Tab through links and controls. Check that focus is visible and no button is clipped or covered.
- Keep the page's content intact. If a rule hides the problem by also hiding a useful part of the page, revise the fix.
Our native row-count test used one Squarespace 7.1 Fluid Engine trial site in Chrome. It does not establish every template, third-party plugin, 7.0 layout, or physical-device result. Need help with a specific saved page? Send us the page URL and what looks wrong.