Full Width Image Card (7.1 Version)

Screen+Shot+2021-02-08+at+8.04.22+AM.jpg

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.


Previous
Previous

Leaflet Styled Images

Next
Next

Rounded Grid Gallery Images