Combining Canva with Squarespace – Part Six

Congratulations, you’ve made it to the home straight! This is the final chapter of our free mini-course: "Combining Canva with Squarespace". If you’ve been following along, you’ll know we’ve thrown down all sorts of muddy image effects and duotone mischief, mostly aimed at making your site look like you thought about it rather than just chucked a few stock images into Squarespace and hoped for the best. But there’s a catch: most of these clever tricks look smashing on desktop… until you open your site on a mobile and wince as text tramples over your best graphics.

So, what now? It’s time to properly sort out your site for every device going. Grab a cuppa, and let's dig into making your Canva-powered effects work beautifully on mobile and desktop alike.

Why This Matters

You might think you’ve finished your website masterpiece. Visually, your desktop layout might give Apple’s marketing pages a run for their money. But here’s the reality: most people are viewing your site on a phone while trying to make a brew, wrangle a dog, or ignore their children for five minutes. If your text is lost in a muddy splatter frame or a hero’s face is hidden behind words, you’ve just wasted hours of design for half your audience.

The number one reason visitors leg it from a site? Bad mobile experience. Sometimes it’s text on an image making it unreadable, other times a botched overlay or cut-off focal point. The more time you spend fixing these issues properly, the less you’ll waste replying to “Can you make my text appear on mobile?” support emails. Get it right now and you’ll thank yourself later, and maybe even have time for a biscuit.

Common Pitfalls

Think you’re alone in your struggles? Not a bit of it. Here’s where even seasoned Squarespace users trip up:

• Uploading gorgeous Canva images, only to see vital details sliced off in mobile view.
• Text blocks behaving like stubborn toddlers, refusing to squeeze where you want on smaller screens, or unceremoniously overlaying your favourite design.
• Fiddling with font sizes until everything looks tiny, but still not quite lining up.
• Giving up and trying eight more banners instead of properly fixing the problem.

The biggest mistake? Leaving default settings to do the heavy lifting. Don’t rely on “Squarespace knows best”. It rarely does, especially with layouts fine-tuned in Canva.

Step-by-Step Fix

Let’s walk through how to make your Canva graphics and Squarespace content play nicely on mobile. To keep things real, we’re revisiting two of our course demo sites: "Motocross" (all mud, machines, and attitude) and "Greening and Co" (professional, with just a hint of gag).

1. Audit Your Existing Desktop and Mobile Layouts

Step 1: Load up your Squarespace site. Click the "Device View" (the iconic mobile-shaped button, lurking top-right in the Squarespace editor). Switch back and forth between desktop and mobile views.

Look for these problem children:

• Does any text overlap a graphic or frame you spent ages on in Canva?
• Are images awkwardly cropped, masking the bit you actually want visitors to see?
• Does your page suddenly stretch, squish, or balloon in all the wrong places?

Example: On our motocross site, the mud splatter frame looked epic in desktop but the headline text wandered straight over the frame on mobile. At Greening and Co, both characters in the hero shot ended up guillotined out of view entirely on mobile.

2. Set (and Test) Image Focal Points for Mobile

Step 2: Focus points aren’t just for cameras. In Squarespace, setting the right focal point keeps your key image content visible, which is crucial for Canva-made graphics with frames, splatters, or duotones.

How-To:

• Hover over your image section and click "Edit".
• Go to the "Background" tab. A circle appears; this is your focal point.
• Drag the circle to centre on your subject (face, mud splash, product, etc.).
• On mobile view, check what’s visible. Tweak as needed and save.

Example: On the motocross homepage, shifting the focal point rightwards kept both rider and mud in view. For Greening and Co, nudging the hero banner’s focus fixed our main subject being lost, and at least one face was lassoed back into the frame.

3. Fix Text Overlaps Using Custom CSS

Step 3: Sometimes the mobile layout moves your text over the worst possible spot, like the main subject’s face or slap in the middle of your mud splatter. You can’t always solve that with settings. It’s time for Custom CSS.

Jargon Buster:

• Custom CSS: Think of this as a magic phrase you whisper to Squarespace. “Do this, but only on mobile!”
• Media Query: This is your megaphone for targeting rules just to certain devices (like screens smaller than 600 pixels).

Beginner’s Guide:

1. In the left menu, go to Design > Custom CSS.
2. To hide a text block only on mobile, use a media query like this:

   @media only screen and (max-width: 600px) {
     /* Your selector here */
     display: none;
   }
   

3. To target just your block, grab the block’s unique code using a Chrome extension like “Squarespace Block Identifier”. (Don’t worry if CSS is Greek to you. Copy, paste, test. If you break something, just undo!)
4. Want to resize or shift text? Instead of display: none;, try:

   font-size: 1.2em;  
   max-width: 60%;
   

Example: For motocross, we shrunk the headline font size and limited its width, letting it hug the safe area instead of slopping over our Canva frame. On Greening and Co, we hid a non-essential line of blurb on mobile, which cleaned up the look and protected our hero’s face.

4. Add and Align Image Overlays from Canva

Step 4: Sometimes giving your text its own designated space is the best fix, especially if you’ve already created a branded frame in Canva with transparent backgrounds.

Here’s how:

• In Canva, design your overlay/frame as a square (PNG with transparency). Save it somewhere you’ll remember.
• In Squarespace, add an Image Block right below your text. Upload your Canva overlay.
• In Image Block settings, choose Poster as the design (not Inline). This puts the text inside the image, so you’re controlling exactly where your words sit.
• Adjust the image block’s width, text alignment, and font sizes so everything sits inside your overlay.
• Add a call-to-action button or subtle animation if it adds to your overall effect.
• Delete the old overlapping text block that’s now redundant.

Example: We used a squashed mud splatter PNG from Canva to build a text highlight for the motocross site. Poster layout kept the words inside the effect, not floating across the page like lost sheep.

5. Polish with Final Responsive Checks and Small Tweaks

Step 5: You’re nearly done. Now you need to stress-test your tweaks:

• Preview on as many devices as you can get your hands on.
• Resize your browser window from huge to tiny; watch elements move.
• Ask a friend to check on their phone (preferably with another brand and browser, if only to keep them on their toes).

What to look for:

• Is text still readable and visible wherever required?
• Do overlays and images behave, or occasionally wander right off the edge?
• Is any important info missing on mobile? (It happens.)
• Are call-to-action buttons still easy to find and click?

What Most People Miss

You might think "job done" once the site "looks alright" on your phone. Here’s the secret sauce: don’t settle for "it works", aim for "it wows". The difference comes from pixel-perfect text alignment, smartly chosen content for each device, and graphics that stay on-brand and intentional at every size.

Also, many skip testing real content, using placeholder Latin instead of your actual text, or forgetting to update that nearly-transparent button on mobile. Design using your actual site content to spot issues as visitors will.

And here’s a sneaky pro move: sometimes it makes more sense to create dedicated mobile versions of especially tricky graphic blocks, hiding them from view on desktop (and vice versa). Yes, it’s an extra step, but it can save your sanity when you want truly professional results.

The Bigger Picture

Getting hands-on with custom CSS and Canva overlays might sound like a lot of upfront faff, but it pays for itself in the long run. Once you’ve cracked image focal points, mobile-only tweaks, and overlay tricks, you’ll:

• Save yourself from frantic, late-night fixes after a client (or boss) spots overlapping text at launch time.
• Feel properly proud linking someone to your site, knowing it sparkles on any device. You won’t just be hoping, you’ll know it’s ready.
• Reduce "can you just fix it on mobile?" feedback emails by about 90%.
• Confidently say “yes, we can do that!” when discussing creative possibilities with Canva and Squarespace.

More importantly, your visitors will glide through your content—whether they’re peering at a phone in a queue or sprawling in front of a monitor. That kind of experience turns bounces into bookings, patience into purchases, and prospects into people who remember your site for all the right reasons.

Wrap-Up

So, what have we fixed?

• No more mysterious missing faces or rinse-and-repeat layouts.
• No more text blocks misbehaving like an untrained puppy on mobile.
• Canva overlays neatly placed, everything pixel-perfect for thumbs and big screens alike.

This is mobile, done right. You don’t need to sweat through every future launch.

If this mini-course gave you a win (or at least saved your graphics from utter mobile carnage), we’d love to hear about it. Share your stories, questions, or war wounds with us. And remember: if you want friendly, practical guides and a support crew on standby, join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.

Good luck, happy building, and don’t forget to check out the previous course chapters if you missed them. Your future design self will thank you!

FAQs

How do I set a focal point in Squarespace?
Click “Edit” on the image, select “background”, and drag the focal circle to where you want the most important bit to show. Usually this means someone’s face or your key text area.

What is a media query, and why do I care?
A media query lets you tell Squarespace “only do this if the screen is below a certain size”. Essential for making things behave just on mobile.

How do I hide text only on mobile, not desktop?
Copy your text block’s selector using the Block Identifier tool, paste it in Custom CSS inside a 600px media query, and use display: none;. The text politely vanishes on phones, but stays put on big screens.

Is it cheating to make a totally different mobile version of a section?
Not at all. If your desktop design is impossible to wrangle on mobile, build a second version, show one only on desktop and the other on mobile. Smart, not lazy.

Where can I find more Pixelhaze mischief?
Head over to our Academy Guides, YouTube playlists, or membership area for the next set of Courses and helpful hacks.

Remember: Want more helpful systems like this? Join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.