Disable Google Map block zoom

Have you noticed how sometimes the google map block zooms in & out when you scroll over it? That can be frustrating, right! The following code snippet will disable this and make sure your map blocks remain static:


// Disable Google Map block zoom //
.sqs-block-map {
pointer-events: none;

Adding CSS for Desktop and Mobile only

Ever been frustrated by how certain things look great on desktop and not right on your mobile device? Use the following code to targets items on different screen sizes.

CSS for Desktop and Mobile

// CSS for Desktop only //
@media only screen and (min-width : 768px) {
   .sqs-block-quote {color: #fecb2f;}

// CSS for Mobile only //
@media only screen and (max-width: 768px) {
   .sqs-block-quote {color: #fecb2f;}

Replace the CSS value ".sqs-block-quote {color: #fecb2f;}" as needed !!!

CSS - Margin and Padding

Adding Margin or Padding to different elements can be done in various ways. Below you find some examples on how to add Margin and Padding to a spacer block in Squarespace. 

Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.

The following code snippets need to be inserted into your CSS Editor. The values "0px" can be changed to suit your site design.



.sqs-block-spacer {
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0px;
   margin-bottom: 0px;


.sqs-block-spacer {
   margin: 0px 0px 0px 0px;



.sqs-block-spacer {
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
   padding-bottom: 0px;


.sqs-block-spacer {
   padding: 0px 0px 0px 0px;

How to make iFrames responsive

Services such as YouTube and Vimeo provide embedded code that you can copy and paste into your own website. The two main ways to embed video content on a website are the HTML5 video element, which doesn’t work in older versions of Internet Explorer, and Flash, which doesn’t work on iOS devices. When you embed content from an external source, the code will include an iframe:

<iframe src="https://www.youtube.com/watch?v=i39FhqXaqp4" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>

This iframe enables external content to be displayed on your website, because it includes a URL that points to the source of the streamed content. However, you’ll notice that the iframe includes width and height attributes.

To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:


<div id="video-container">
<iframe src="https://www.youtube.com/watch?v=i39FhqXaqp4" allowFullScreen></iframe>

* change the http link to yours


#video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;

#video-container iframe {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;

That's it!

see it in action:

p.s. If you're using Squarespace, all you have to do is putting your URL into the Embed widget. The rest will be done by the SQSP system.

Countdown Timer for your Squarespace or Shopify Website

Are you looking for a simple yet highly customisable Countdown Timer for your website? This might be what you are looking for.

Step 1 - Insert this HTML code to wherever you want the timer to run


<h1>Countdown Timer - Rename this Title</h1>
<div id="clockdiv">
    <span class="days"></span>
    <div class="smalltext">Days</div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>

Step 2 - Add this script to your Header or Footer "Code Injection" area


function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {

  var timeinterval = setInterval(updateClock, 1000);

var deadline = new Date(Date.parse(new Date('2020/10/10')) + 150 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

Change the Date '2020/10/102' in the last line accordingly but keep the quotation marks.

Step 3 - Design your countdown timer to your own judgement. 


    color: #c42130;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 50px;

#clockdiv > div {
    padding: 10px;
    background: ;
    display: inline-block;

#clockdiv div > span{
    padding: 20px;
    border-radius: 100%;
    background: #ffff;
    display: inline-block;

.smalltext {
    padding-top: 5px;
    font-size: 16px;

That's it. Enjoy!

"Scroll Up Button" for any Squarespace Website

If you are looking for a very easy way to link back to the top of your page without any extra scripts, here is a super simple solution for just doing that.

Step 1 - Add a "Code Block" where you want to insert the button
Step 2 - Make sure it’s set to HTML and the Display Source option is unchecked
Step 3 - Add this code:

<a href="#" class="scrollup">Scroll Up</a>


To change the feel, look and design follow along...

CSS - Design It

.scrollup {
   width: 50px;
   height: 50px;
   opacity: 0.5;
   position: fixed;
   bottom: 50px;
   right: 100px;
   text-indent: -9999px;
   background: url('scroll-up-icon.png') no-repeat;

Replace 'scroll-up-icon.png' with your scroll up button and you can mess with the exact positioning, color, width, ... with the according CSS values.

You are looking for a smooth scroll up then just a big jump. Here is how...


Step 1 - Go to "Page Header Code Injection"
Step 2 - Add this code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

   $(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 100) {
           } else {
       $('.scrollup').click(function () {
           $("html, body").animate({
               scrollTop: 0
           }, 600);
           return false;

How to get rid of unwanted table (cell) border

Today most design problems can be solved through CSS but sometimes you still need (or want) to design certain things using tables. In that case you might have come across the problem of unwanted space between cells. This might help to solve the problem of unwanted table space.


#table { 
  margin: 0px;
  padding: 0px;

#table img {
  display: block

How to delete old DNS records on you Windows computer?

More than ones my PC was showing me an old website after changing the DNS records successfully. My Mac computer was already showing the new website, and if I looked up the DNS records on a web service like: intodns I could see that the DNS records were configured correctly.

If you ever run into this problem just reset the DNS table on your Windows computer. And that's how it's done:

Click on the Windows START button / open the system console (CMD) / and make the following entry:
ipconfig /flushdns

Done. Now your Windows computer will also show you the new website! 

How to insert a new editable block to your Squarespace template

Most Squarespace templates come with a set of code injection points out of the box. But sometimes you need an extra area to put some code where the template doesn't have one. In my case a wanted to add some information above my header but inside the canvas.

STEP 1: Add a new block, or use one of the code injections points (header/footer). Then add your extra information (text, images, etc.) into that block.


<div id="pre-header">
  Free Legal Evaluation, CALL NOW (XXX) xxx-xxxx

STEP 2: Get the block id. Use Firebug or similar app to track down the unique identifier for the new blog you've just created. If you add a new div element within your SQSP code injections points, as I did, you don't need to.

STEP 3: Use jQuery to re-position your block. jQuery allows you to move your newly created block to or inside another area of your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
   $(function() {
   $("#pre-header") .prependTo ("#canvas");

In my case adding a phone numer above the header was pretty simple. First, I added a div element called "pre-header" to the code injection point (footer) to make sure that it will be displayed on all pages. If I would add a block to the sidebar section, my new block might not show up on every page, depending on the settings.

Step 4 -  Add some custom CSS to make it look right.

#pre-header {
  font-weight: bold;
  padding: 10px;

That's it.

Dynamic toggle function to Show or Hide content

You have extra information you want to make available to your website visitors but you don't want to mess-up your design by to much content? A dynamic toggle to Show or Hide this extra information might be what you're looking for.

It's pretty simple.

Step 1 - Add the following script to your templates header injection point.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

<script type="text/javascript">
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';

Line 1 simply loads the minimized jQuery library from the Google library page. The rest is what the action does.

Step 2 - Add the additional HTML code with your extra text.

<h3 onclick="myFunction()">Click Me</h3>

<div id="myDIV">
  This is my DIV element.

Step 3 - Use CSS to make it look right.

#myDIV {
   padding: 20px;

And if you want to show your extra content by default just remove: "display:none;" from the CSS style entry!

That's it!

see it in action...

Click Me

This is my DIV element.

Common CSS Properties

Text inside the Search Field

If you want to have some text, for example: "Search Site" inside your Squarespace Search field, you can easily do this with the following jQuery code.

Just add the following Script to your "Extra Header Code".

Then just rename "Search Site" to whatever you want it to say. Keep the quotation marks!


<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
$('.search-form-pt .queryFieldWrapper input').attr({value:"Search Site" });

Why does your company need Search Engine Optimization (SEO)?

Search Engine Optimization (SEO)

SEO is tricky to get right, but once done it will improve your page ranking and therefore lead to more business and customers. Done wrong, it can damage your site and reputation which as you know can be very hard to fix.

So why does your company even need SEO?

The majority of web traffic is still driven by search engines like Google, Bing and Yahoo. If your site cannot be found by search engines, you miss out on an incredible opportunity. If you can't be found on the internet, then for many you won't exist. Therefore, it is vital to make sure that you will be found.

SEO essentials

There are many factors that influence whether a particular web site appears in web search results and in what ranking. Some factors play a big roll, others a small and some you can't even influence. But let's have look at what you can and should do.


Backlinks are external links to your site. The more you have, the better. But make sure they are only on decent websites or it could damage your reputation. As true in real life, good acquaintances will bring you further but bad ones will most likely cause more damage than good.


All your pages should be easy to access by humans and by the robots (also knows as spiders) from search engines. It may even be useful to think of search engines as users with substantial constraints. They can't read text in images or interpret JavaScript or Flash content. Therefore make sure all your pages are accessible by at least one static link and that you fill in the attributes.

META tags

META tags are HTML codes that will help search engines understand, catalog and categorize your web page and are often not directly visible to your visitors. Your META tags should be configured right but they are not the "magic bullet" that will skyrocket your site to the top of all search page listings as you might have been told before.


Choose the right keywords. For instance, if you have a site about cats, do not try and optimize for the keyword “cat”. Instead, focus on keywords like “ragdoll kitten for sale”, “homemade cat food” or “cat training facility”. Think about what words your potential customers might type into the search bar to find your services and use them. To succeed on a very popular one-word keyword is very difficult. Instead, focus on less competitive and more specific keywords.


Write for the human users first. Google and Co.'s robots will crawl your site and it’s important that they find what you want them to. But they will not buy anything form you, sign-up for a newsletter or pick up the phone to call you about your services. Humans do those things, so make sure you write for them first. Also, content which is different from the content on other sites is a real boost for your site's rankings and if you regularly add new content it will make it even better.


Start a blog. Search engines love blogs for the fresh and highly structured data. Beyond that, there’s no better way to interact with your customers and community.


Make sure your web site is written in valid HTML code. Search engines have to parse the HTML code of your web site to find the relevant content. If you HTML code contains errors, search engines might not be able to find the content on the page, which will end your SEO efforts right there.


When you write your web site copy make sure you use correct headings (h1, h2, h3, ...). Heading tags label your headlines so that search engines will recognize it as "important" and make it easy for them to determine what your web site is all about. When writing your headings, try to include your main keywords.

Social Media

The use of Facebook, Twitter, Youtube and other social platforms can be extremely helpful in getting a better page ranking. The problem is, it's a lot of work and if you don't have a proper marketing plan in place it might not be worth the time and money. On top of that, Social Media is very fast changing environment. And with the new Google+, 1 more big player has joined the game. We will provide more about Social Media Marketing in a separate blog post.


Downtime of your website can lead to vastly decreased performance in organic search. A reliable hosting service is very important to your SEO and should not be underestimated. Good hosting service is always worth the money.

A few more tips & trick that will help your page ranking


Build a beautiful web site. If you want to show up on the first page of search results make sure your site is looking good and easy to navigate. If your site is unattractive or if they can’t find what they are looking for, even the best SEO will not be of much value to you.


Commit yourself to the process. SEO isn’t a one time event, it requires a long-term outlook and commitment.


Be patient. SEO isn’t about instant glory. Results often take months to see. This is especially true if you are a small and new company.

And finally, here are a few myths about Search Engine Optimization


In the late 1990’s search engine had “submission” forms. You would “submit” your site to make sure it would be crawled by the varies search engines. You can still see submission pages for Google, Bing, Yahoo and Co but these are remains of time long past. This is something you don't have to worry about anymore. In fact, if you hear a pitch from an SEO expert offering “search engine submission” services, run as fast as you can.


Adsense might boost your income but Google will not give you a ranking bonus because of hosting ads.


Adwords done right will bring more traffic to your site but this will not affect your ranking on search engines in any way.


SEO plays a very important part in your online appearance but remember that no one can guarantee a #1 ranking on Google, Bing or other search engines. But get the SEO essentials right and you will have a much more effective website.

High Resolution Icon for your iPhone or iPad

  • Design your icon in your favorite graphic application like Photoshop
  • The resolution needs to be 114 x 114 pixels
  • Save the file as a PNG image, named: apple-touch-icon.png
  • Upload your icon to your main storage location on your SquareSpace site


Note: You don't have to apply any of the cool Apple icon effects (rounded corners, gloss, etc.) just design your icon
with plain square edges, the effects will be created for you


Code (Extra Header Code)

<link rel="apple-touch-icon" href="http://www.yourwebsite.com/storage/apple-touch-icon.png" />


If you need help designing your icon. Please feel free to contact us!