If your website features too much padding, it can look unprofessional and disorganized. Luckily, Squarespace makes it possible for us to make these changes easily with simple tweaks to site styles.
When hovering over an area that needs editing, a blue highlighter box appears surrounding its padding to display any necessary edits that might affect it. It will also list all tweaks which could potentially change this particular location.
1. Change Your Theme
Content on mobile devices will automatically adapt to fit within the browser window – this is known as responsive design and all Squarespace sites by default include this functionality, including Brine templates.
Blocks on mobile are typically arranged according to when they were added, which may create some overlap if multiple blocks have been placed into a section at once. Sometimes rearranging them in their proper order can solve this issue.
To adjust padding, hover your cursor over the area requiring changes and look for a blue style highlight box to appear around it. If there’s no blue style highlight box visible, open Site Settings menu > Style Editor > Scroll through list of tweaks until one that applies is found; most padding tweaks have sliders which when moved down will remove padding completely; margin tweaks do the same thing.
2. Change Your Page Layout
If your content appears squished on mobile, padding could be to blame. Padding refers to extra space built into a layout for elements like page margins, navigation menus, headers and footers – use page layouts with tailored padding tweaks to achieve an organized and tidy appearance.
If you want to lower the height of a section, try placing two full width spacers side-by-side; this will minimize extra padding on both desktops and mobiles.
All templates offer settings that influence how their websites appear on mobile devices, for instance Fluid Engine websites stack vertically while still maintaining their computer layout. Some version 7.0 templates also offer customized mobile styles for text and images.
If there is any blank space on your site, hover your cursor over it to display a blue style highlighter box and explore your site’s mobile settings. Or open up Pages panel and select any page to switch into mobile view view mode.
3. Change Your Header
As users scroll down a webpage, their eyes are drawn naturally towards menu items or buttons. By strategically placing padding, you can guide their gaze toward your call-to-action and increase clickthroughs and conversions.
An info-packed header on mobile can feel intimidating to readers and may prompt them to skip over or leave your page entirely.
Squarespace 7.1 makes editing your mobile header’s styles easy! Simply hover your cursor over its header to display a blue style highlighter box, click to access the site styles panel and search “padding,” “margin,” or “full bleed” options that affect it – these options can also be set globally with the global settings panel. In addition to changing its style you can also select whether or not your header should remain fixed (scroll back or basic).
4. Change Your Footer
Adjusting padding can be an effective solution to layouts that appear disjointed. Simply hover your mouse over the area where you wish to make changes; a blue style highlight box will appear around the padded area containing only relevant style tweaks; click this box and scroll through its contents until one containing words like “padding,” “margin,” or “full bleed” comes up for display – then make changes there and see which tweaks have the greatest potential impact.
As a Squarespace website owner, you likely know that the platform automatically scales your content to fit any screen size – yet this may cause issues for certain elements like header and footer areas.
