Do It Yourself – Website Tutorials
Brand new to CSS? Awesome! 😍 I want to teach you the basics – check out my free training here 👉 https://insidethesquare.co/learn-css
—
This tutorial is for any version of Squarespace, 7 or 7.1!
—
In this tutorial you’re going to learn how a little clever code can turn a basic text block into a pricing table that resizes with the rest of your website, responsively, meaning it will look great on any device!
There are a few simple customizations you can do to the code below to make it match the look of the site you’re creating. From colors to border style, be sure to watch the step by step tutorial to understand what you are going to want to change in the codes below!
→ To install this on one specific page, use page header code injection, or a code block if you are on a personal plan. Check out this tutorial for a super simple step-by-step tutorial: https://youtu.be/ptQkzTVYRFs
→ To see this code inaction, visit: https://insidethesquare.co/pricing-tables
→ Two Column Codes
.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%}
}
→ Three Column Codes
.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%} }
→ Four Column Codes
.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%} }
→Add a box shadow on a hover
.sqs-col-3:hover{box-shadow: 2px 5px 15px rgba(0,0,0,0.8)}
→ Change button background color on a hover
.sqs-col-3:hover .sqs-block-button-element {background-color: green!important}
—
▸▸▸ Ready for more?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css
▸▸▸ Ready to be an expert?
Copy & pasting CSS is a great way to get started, but if you really want to level up your skills and write your own code, then you’re ready for the Custom Code Academy. I created this course to teach you everything I know about CSS for Squarespace. Enrollment is open right now, and access lasts a lifetime. Join the academy today at https://CustomCodeAcademy.com
—-
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacecsshacks
The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.
source