Squarespace’s Fluid Engine allows us to add blocks in whatever order we like; however, sometimes they may not display in their desired order on mobile. Blocks may overlap creating some unique designs.
Sometimes rearranging is all it takes to solve our issues; other times we need to go in deeper with our edits.
Site Styles
Squarespace’s Fluid Engine makes it simple and quick to make changes that only affect mobile viewing, such as font customizations, color changes, or spacing changes, without impacting desktop views of your site. This feature is perfect if you’re just getting started or changing up your design!
By default, Squarespace keeps the center part of an image when cropping it for mobile viewing, which can pose issues when used with text overlaying an image as text may become cut off. To address this issue and to select which part will remain preserved when viewing on mobile phones or other mobile devices. You can use Image Focal Point to set this.
This can be particularly useful when your images are too large for mobile viewing or you want to change their background color without impacting other devices. Furthermore, the Site Styles icon located in the Editor allows you to add page transitions, giving visitors a smooth experience as they move between pages on your site.
By adding a media query to your CSS, you can also set different font sizes for mobile viewing by wrapping values with curly brackets and including an ID before opening them.
Custom CSS
Over half the internet traffic now comes through mobile devices, making responsive design more important than ever. Squarespace comes equipped with its own responsive design feature; to customize how your site looks on mobile access your backend and open up Site Options > Site Options menu for global desktop and Mobile options across the top. Click Mobile option which opens Mobile Site Editor.
Changes to CSS may result in noticeable variations between mobile and desktop versions of your site; for example, changing the order of image blocks with text boxes below them could affect their display on mobile.
Problematic spacer blocks may also be taking up too much room on mobile screens. To alleviate this situation, simply add a CSS rule to remove padding around content of each block; alternatively use the Mobile Editor ‘Custom CSS’ field to target specific elements within sections.
DIY designers frequently make the mistake of designing their pages on desktop, then forgetting to test the mobile version. Squarespace automatically optimizes pages for various screen sizes; by testing them through the Mobile Editor beforehand you may catch any potential mistakes before they go live.
Media Queries
Media queries, introduced in CSS3, enable you to apply specific CSS rules only on certain screen sizes and devices based on media type and one or more logical expressions that test for certain media features. They may contain simple or complex conditions using various logical operators like and, not and only.
There are some very specialized media features, such as the prefers-contrast media query that enables you to set different color schemes depending on user preference (but only available in browsers that support it). But the most frequently used features are width and height related media features: media width is used to specify minimum text width while media height defines maximum element heights.
Min-width-in-px or min-width-in-pixels media queries allow you to tailor font size to improve readability on small screens, for instance by decreasing heading font sizes so they won’t become unreadable on mobile. Hyphens-none media queries allow you to disable hyphenation for mobile view so your headers will appear uniformly spaced and won’t exceed any allotted length.
Mobile Editor
Squarespace provides a free-form page editor known as Fluid Engine that makes website creation a breeze. With it you can freely place and overlap content on pages without worry or confusion – a feature only available with Squarespace versions 7.1 or later that are also known as Mobile Editor.
With our Mobile Editor, you can edit your site from your phone, tablet or even touchscreen laptop – perfect for when you’re out and about and can’t be using a desktop browser to make changes! Make changes without altering desktop views with ease when editing on-the-go! This convenient feature makes editing accessible anywhere at any time.
A key benefit of the Mobile Editor is being able to adjust fonts specifically for mobile screens – this is essential as search engines prioritize sites which are mobile friendly.
The Mobile Editor also allows you to choose a focal point for each image you upload, which will remain when cropping it for mobile viewing. This feature is especially helpful if your images include text that needs to be easily legible on mobile screens – as text will read better over an unobscured area of an image.
One drawback of Squarespace’s Mobile Editor is its potential slowness when loading VisualEditor modals over an effective phone connection, and this delay can be frustrating for users. Squarespace has acknowledged this shortcoming and is looking into ways to address it.