Perfecting your small business Squarespace website for mobile devices

Foundational

•

Most people design their website from a desktop or laptop which makes sense, but it’s important to note that most visitors will be viewing your website from a mobile device.

Squarespace templates are pretty fantastic design-wise, but inevitably there will be things that may not look perfect on mobile once you start customizing any template with your content and brand identity.

Before you publish your website or whenever you make changes to any website layout, it’s always recommended to do a quick QA from your mobile device to make sure the page looks and functions great on small screens.

Here are top 10 common website design issues that can arise on mobile devices:

Mobile webpage layout checklist

  1. Headings and subheading font sizes are too big
  2. Big gaps between sections of content
  3. Text and images look squished together
  4. Images aren’t aligned correctly
  5. Body font is too big
  6. Content is not in the proper order when scrolling
  7. Logo in the header is too big
  8. The page is hard to navigate
  9. There’s too much content and the page requires too much scrolling
  10. Pop ups or announcement bars are overlapping and hard to dismiss

With custom CSS, it’s possible to make changes to your website just for mobile screens. This can be done with media queries. With some simple CSS code, you can declare something like the following:

On x page, for y screen size (either smaller than a defined maximum size or between two defined screen sizes in pixels), show xyz adjustments in the layout that are different from the desktop.

As an example, the following code would make the H1 heading on the page with a body ID of ‘collection-6089d0c8c193093’ display with a font size of 20px on any screen size under a width of 600 pixels.

@media (max-width: 600px) {

     #collection-6089d0c8c193 h1 {
         font: 20px;
     }

}

How to find the body ID of your Squarespace webpage

  • From a desktop or laptop, open up your webpage in Chrome.
  • Right click anywhere on the page and click on ‘view page source’.
  • Now run a search on the page (command + f) for:
<body
  • Copy the code in the body ID which will look something like:
collection-6089d0c8c1930938ba

When you add the body id to your custom code, be sure to add a hashtag at the very beginning:

#collection-6089d0c8c1930938ba

Where to put the code in your Squarespace settings

Log in to your Squarespace site. In the dashboard, click on Design > Custom CSS.

You’ll see a box where you can paste the code – but where you paste the code is important.

Computers will read code from top to bottom and for CSS code, it applies code to your website in a cascading fashion meaning anything it reads first, will be the baseline. Any code that conflicts with the baseline after the initial code will be treated as an addendum.

This is all to say, code at the top of the file will be setting styles for your desktop. Be sure to paste your code after or below any custom CSS code for desktop to set styles that are specific to mobile so that your mobile styles don’t accidentally get applied to desktop screens.

Simply said: If there’s any custom code in the box, scroll to the bottom of that code and paste in your mobile device code below everything else.

What can be done with custom css?

Here are some commonly needed things that can be achieved to tweak a webpage design just for mobile screens:

  • Custom font sizes
  • Custom colors
  • Hiding content or sections of content
  • Showing a different version (shorter or longer for instance) of content
  • Adjusting spacing
  • Adjusting image sizes
  • Custom fonts
  • Rearranging sections in a different order
  • Making content bigger or smaller

How to check your webpage layout on multiple devices

One final bit of advice is to QA your webpage on various mobile screen sizes. An iPhone 11 is going to be a different screen width from say, an iPhone SE and you want your page to look good in both. This can be done in two ways:

  • Use Device Mode in Chrome DevTools. It’s not 100% accurate but it tends to catch a lot of issues.
  • Use a service like BrowserStack which allows you to view your webpage from any device in combination with every popular browser. There’s a free tier option that can be used to do quick checks on a simple site.
  • The cheapest option which you should always do after you make webpage layout changes is simply view the page from your own mobile device.