How to create simple price tables in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

The CSS codes below will help you take basic website sections and turn them into styled pricing tables, complete with text and buttons.

When you create columns inside a Squarespace page, they will be given a “code nickname” that we can use in custom CSS to add borders, shadows, and specific sizes to just those columns.

We can also change colors inside those columns, specifying first, second, third and so on.

The codes you need to create this pricing table look are below BUT there are a LOT of customization options with this one! be sure to watch the tutorial video so you understand what part of the codes you will want to change to make it look amazing on your own site.

Codes for creating a customized two column layout

.sqs-col-6 {border: 5px solid #50bdb8; width:40%!important; margin-left: 7%} @media only screen and (max-width:768px){ .sqs-col-6 {margin-left:0%!important; margin-bottom: 5%}}

Codes for creating a customized three column layout

.sqs-col-4 {border: 5px solid #50bdb8; width:25%!important; margin-left: 6.25%} @media only screen and (max-width:768px){ .sqs-col-4 {margin-left:0%!important; margin-bottom: 5%}}

Codes for creating a customized four column layout

.sqs-col-3 {border: 5px solid #50bdb8; width:20%!important; margin-left:3%} @media only screen and (max-width:768px){.sqs-col-3 {margin-left: 0%!important; margin-bottom: 5%}}