two columns of content in Squarespace Mobile Version

How to create two columns of content in Squarespace Mobile Version

In today’s world dominated by smartphones, making sure your website looks fantastic on small screens is not just a choice; it’s a must. Squarespace 7.1 gives you the tools to create great desktop layouts, but what about mobile? Don’t worry, Squarespace enthusiasts, this blog is here to guide you into the world of crafting two columns of content in Squarespace Mobile Version!

Is your Squarespace site feeling a bit lost on those tiny phone screens? Fear not, fellow digital creators! Today, let’s explore the magic of creating custom two-column layouts for mobile in Squarespace 7.1. By the end of this journey, you’ll be ready to transform your site from a single-file snooze-fest to a lively, mobile-optimized masterpiece.

Just a heads-up: This guide is designed for Squarespace 7.1. Older versions won’t be able to join in on the two-column fun.

The Power of Two Columns on Mobile

Mastering the art of two-column layouts on mobile devices in Squarespace 7.1 isn’t just about making things look good; it’s about giving your users a better experience. By neatly arranging content into two columns, you’re optimizing space and readability, ensuring visitors can easily engage with what your site offers.

Creating two columns of content in Squarespace Mobile Version

Now, grab your coding wand, and let’s create some mobile magic!

  • Log in to your Squarespace account and choose the site you wanna edit.
  • Navigate to Website>Website Tools>Custom CSS. How to create two columns of content for the mobile version of Squarespace
  • Copy the desired code from below and paste it under Custom CSS.

Video Collection Pages:

Showcase your cinematic gems in pairs! This bit of code works its magic on those fancy video collection pages:

@media only screen and (max-width: 788px) {
.lessons .list-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr))!important


How to create two columns of content for the mobile version of Squarespace

Grid Blog Layout:

It’s time to up your blog’s mobile game! This code handles the grid blog layout:

@media only screen and (max-width: 767px) {.blog-basic-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr))!important;
grid-column-gap: 5px!important;
grid-row-gap: 5px!important;
grid-auto-rows: min-content!important;

How to create two columns of content for the mobile version of Squarespace


Turn your mobile store into a shopping spree haven with this code:

@media only screen and (max-width: 767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.products .grid-item {
width: 48%;

List Sections:

Don’t let your lists get lonely! This code jazzes up simple list sections with two-column goodness:

@media only screen and (max-width: 640px){
.user-items-list-simple:not([data-num-columns="1"]) {
grid-template-columns: repeat(2,1fr);
grid-gap: 10px!important}
.list-item-content__title{font-size: 1rem!important}
.list-item{padding: .5rem!important}

Bonus Tip: Remember, it’s not just about code! Explore Squarespace’s built-in mobile settings like padding and margins for even more fine-tuning.

Ready to unleash your mastery of mobile layouts? Don’t be afraid to experiment! Start small, test across different devices, and watch your site transform into a mobile masterpiece. Remember, having a mobile-friendly site isn’t just a trend; it’s a necessity. So, grab your code (and maybe a cup of coffee), roll up your sleeves, and conquer the mobile web!

How to customize Squarespace blog title font

How to enable your SSL in Squarespace

P.S. Feeling a bit lost? The Squarespace community and the web are full of resources. Use the Help Center, Forums, and third-party tutorials to turn your mobile layout dreams into reality.


Does Squarespace automatically resize for mobile?

Squarespace’s built-in responsive design resizes your content and images to fit different devices and screen widths. 

Are Squarespace templates mobile-friendly?

All Squarespace sites are optimized with responsive design, so your site can adjust to the format of any mobile device or browser.

Can I monetize my Squarespace website?

Even if you don’t sell products or services, you can monetize other aspects of your Squarespace site: Ask for donations for your cause using a donations block. Sell on Amazon, or join their Associates Program, using an Amazon block to promote a product. Use a third-party service to create ads on your site.

Can you put Google ads on Squarespace?

Although Squarespace doesn’t have built-in advertisement integrations, you can include ads on your site using third-party services like Google AdSense. If you display ads, ensure their content follows the Terms of Service and Acceptable Use Policy.