Full Width Image Card (7.1 Version)

Look Demo

Make the image card full width on any page section. This plugin uses css editor and works with Squarespace 7.1.

How To Install

Add an Image Card to any page section. Make sure the Image Card should be completely alone in this section – do not add any additional blocks.

Set the page’s format settings to the following:

• Section Height: 10

• Content Width: Large

• Content Alignment: Middle

Once the page is saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Full Width Image Card //

[data-section-id="PAGE-SECTION-ID-HERE"] {
overflow-x: hidden !important;
overflow-y:hidden !important;
}

[data-section-id="PAGE-SECTION-ID-HERE"] {
.content-wrapper  {
  padding: 0px !important;
  margin: 0px auto;
  display: contents;
  }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 40px !important;
}
}

Next, on the page with the Image Card right click (but not on the Image Card) and select Inspect (Google Chrome) or Inspect Element (Safari).

Locate the text that says Data-Section-ID. Copy the long digit part of the code and replace PAGE-SECTION-ID-HERE in both areas of the CSS.

Adding this ID should have made the Map Block full width within that specific page section.

Customize

Adjust the padding value to your liking.

This helps add spacing around the image card’s text content so it is not full width on mobile.

License

This plugin comes with an Unlimited Use License. View License Terms