Jump to content

How do I make make three squares in one section with borders like this?

Go to solution Solved by Caroline_Smith,

Recommended Posts

  • Solution

If you are using a Squarespace 7.1 site, this will be very easy using a List Section.

  1. Add a Simple List, turn on/off whichever elements you want to include,
  2. Set "Space Between Columns" and "Space Between Rows" to 0px
  3. Copy & Paste into Design > Custom CSS. You will need to know the page section's "data-section-id" attribute to replace the placeholder with.

 

[data-section-id="SECTION_ID_GOES_HERE"] {
  .user-items-list-simple .list-item {
      border: 2px solid gray;
      padding: 46px;
  }
  @media(min-width: 574px) {
    li.list-item:nth-child(2) {
      border-left: none;
      border-right: none;
    }
  }
  @media(min-width: 574px) {
    li.list-item:nth-child(2) {
      border-top: none;
      border-bottom: none;
    }
  }
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.