CSS Basics for Responsive Design in Squarespace

Learning Objectives

By the end of this chapter, you'll be able to:

• Add custom CSS code to your Squarespace site safely
• Write basic media queries to make your site responsive
• Test and troubleshoot CSS changes on different devices
• Fix common mobile display issues using CSS

Introduction

Your Squarespace site needs to look good on every device, from desktop computers to mobile phones. That's where responsive design comes in. This chapter shows you how to use custom CSS to control how your site appears on different screen sizes.

Most Squarespace templates are already responsive, but sometimes you need to make adjustments. Perhaps your text is too small on mobile, or your navigation menu doesn't work well on tablets. Custom CSS gives you the control to fix these issues.

Lessons

Adding Custom CSS to Squarespace

Before you can write responsive CSS, you need to know where to put it. Squarespace provides a specific area for custom code.

Step 1: Log into your Squarespace account and go to your site's dashboard.

Step 2: Click Settings, then Advanced, then Code Injection.

Step 3: Scroll down to find the Header section. This is where you'll add your CSS.

Step 4: Wrap your CSS code in style tags like this:

<style>
/* Your CSS goes here */
</style>

Step 5: Click Save when you're done.

Your CSS will now apply to your entire site. Changes might take a few minutes to appear, and you may need to refresh your browser.

Understanding Media Queries

Media queries are the foundation of responsive design. They allow you to apply different CSS rules based on the screen size of the device viewing your site.

Here's the basic structure:

@media (max-width: 768px) {
  /* CSS for screens smaller than 768px */
}

This means "apply these styles only when the screen width is 768 pixels or less."

Common breakpoints to use:

• max-width: 1200px for large tablets and small laptops
• max-width: 768px for tablets in portrait mode
• max-width: 480px for mobile phones

You can also use min-width to target larger screens:

@media (min-width: 769px) {
  /* CSS for screens larger than 768px */
}

Writing Responsive CSS for Common Issues

Making text more readable on mobile:

@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  
  h1 {
    font-size: 28px;
  }
}

Adjusting spacing on smaller screens:

@media (max-width: 768px) {
  .content-wrapper {
    padding: 20px 15px;
  }
}

Hiding elements on mobile:

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

Testing Your Responsive Design

After adding CSS, you need to test how it looks on different devices.

Method 1: Browser Developer Tools

• Right-click on your site and select "Inspect" or "Inspect Element"
• Look for a mobile/tablet icon in the developer tools
• Click it to simulate different screen sizes

Method 2: Resize Your Browser Window

• Make your browser window narrower to simulate mobile screens
• Watch how your site changes at different widths

Method 3: Test on Real Devices

• Check your site on your phone and tablet
• Ask friends or family to test it on their devices

This is the bit most people miss: always test on real devices, not just browser tools. Sometimes things look different on actual mobile devices.

Practice

Try this exercise to practise what you've learned:

1. Add this CSS to your site's Code Injection area:
   “`css
   

   
   2. Save the changes and view your site on a mobile device or narrow browser window.
   
   3. Notice how the header title and navigation text become smaller on mobile screens.
   
   4. Experiment with different pixel values to see how they affect the appearance.
   
   ## FAQs
   
   **Q: Why aren't my CSS changes showing up?**
   A: Try these solutions in order: refresh your browser, clear your browser cache, check for typos in your CSS, and make sure you're targeting the right elements. Sometimes you need to add `!important` after your CSS properties.
   
   **Q: Can I break my site by adding custom CSS?**
   A: CSS changes only affect the appearance of your site, not its functionality. If something goes wrong, you can always delete the CSS code you added. However, always test changes on different devices before keeping them.
   
   **Q: How do I know what CSS classes to target?**
   A: Use your browser's developer tools to inspect elements on your site. Right-click on any element and select "Inspect" to see its CSS classes and current styles.
   
   **Q: Should I use Squarespace 7.0 or 7.1 for custom CSS?**
   A: Both versions support custom CSS, but Squarespace 7.1 has better built-in responsive features. If you're starting a new site, choose 7.1 as it requires less custom CSS work.
   
   **Q: My CSS works on desktop but not mobile. What's wrong?**
   A: Check that you're using the correct media query syntax and breakpoints. Also, make sure you're testing on actual mobile devices, not just browser tools.
   
   ## Jargon Buster
   
   **Breakpoint**: The screen width at which your site's layout changes, typically defined in media queries.
   
   **CSS Selector**: The part of CSS that targets specific HTML elements, like `.header-title` or `#navigation`.
   
   **Media Query**: CSS code that applies styles only when certain conditions are met, usually related to screen size.
   
   **Responsive Design**: A design approach that makes websites work well on all devices by adapting to different screen sizes.
   
   **Viewport**: The visible area of a web page on a device screen.
   
   ## Wrap-up
   
   You now know how to add custom CSS to your Squarespace site and use media queries to make it responsive. The key is to start small, test everything, and make gradual improvements.
   
   Remember to test your changes on real devices, not just browser tools. What looks good on your desktop might need adjustments on mobile phones.
   
   Roll your sleeves up and start experimenting with the techniques in this chapter. The more you practise, the more comfortable you'll become with responsive CSS.
   
   Ready to take your Squarespace skills further? Join our community of learners at https://www.pixelhaze.academy/membership