Full Width Image Card (7.1 Version)

---

Description

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 is by itself in this section – do not add any additional blocks.

Set the page section’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 - Page Section //

[data-section-id="012345"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: auto !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}}

// Full Width Image Card - Text Padding //
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 40px !important;
}

// Full Width Image Card - Mobile Stack //

@media (max-width: 800px) {
  .design-layout-card {
    flex-direction: column !important;
    .image-card-wrapper, .intrinsic {
      width: 100% !important;
}}}

Next, you’ll need to locate the page section’s ID. Use this free Google Chrome Extension to find this ID.

Replace [data-section-id="012345"] with the page section’s ID. This will make the page section full width, resulting in the Image Card Block being full width as well.

---

Customize

Full Width Image Card - Text Padding: Adjust the padding value to add spacing around the text content. This is helpful for mobile so the text itself doesn’t go full width.

---