Full Width Image Card (7.1 Version)

The original library, featuring hundreds of free copy-and-paste plugins for Squarespace. These legacy plugins are preserved as they were originally released and are available as-is. For no-code plugins with visual editing and live previews, explore the current plugin library.
Overview
Make the image card full width on any page section. This plugin uses css editor and works with Squarespace 7.1.
Plugin Delivery
This is a free plugin from the original Ghost Plugins library. Copy the code below and paste it into your Squarespace site. No purchase or account needed.
Squarespace Compatibility & Requirements
Compatibility notes preserved from the original release.
Customizable Options
- 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.
Install
Legacy plugins install by hand, there is no Plugin Studio build for this one.
- 1Copy the code from the Code Documentation section below.
- 2In Squarespace, open Website, Pages, Website Tools, Custom CSS for CSS, or Settings, Advanced, Code Injection for HTML and JavaScript.
- 3Paste the code, save, then refresh your site to see the plugin running.
Code Documentation
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.
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.
// 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;
}}}Classes and Styling
Selectors and variables this plugin uses, target them in Custom CSS to restyle it.
.content-wrapper.sqs-layout.sqs-row.sqs-block.image-card-wrapper.sqs-dynamic-text-container.design-layout-card.intrinsicFAQ
Answers to common questions about setup, customization, and troubleshooting.
Is this plugin free?
Yes. Legacy plugins are free to use on any site, no account or purchase needed.
Will it work on my Squarespace version?
Legacy plugins were built for the version noted in Squarespace Compatibility & Requirements and are provided as-is. Newer platform changes may require small tweaks.
Can I customize it?
Yes. Edit the values in Script Settings or override the selectors listed under Classes and Styling in your Custom CSS.
Do you support legacy plugins?
Legacy plugins are no longer updated. For maintained plugins with Plugin Studio and ongoing support, browse the current plugin library.
Changelog
A history of updates released for this plugin.
Original release
Archived exactly as it shipped in the original plugin library. No further updates are planned for legacy plugins.
Recommended
Want the current Ghost experience?
Explore the current plugin library for plugins with live previews, built-in customization options, Plugin Studio editing, easier installation, and ongoing updates designed for the latest Ghost experience.
Browse Current Plugins →Community
Give claps, share your site, and talk with others using this plugin.
0 claps
Show thanks for this plugin.
Give Claps and Join The Conversation
Sign in to give claps and join the conversation.
Loading…
