This is an example of a full-width image card that works beautiful when you need to make a full page of an image along with text without using unnecessary blocks like spacers and text boxes but instead, just the image block!
Step 1: Add an image card block to any page. Ensure the image card is the only thing on the page for the time being. You’ll be able to add other sections after but don’t include any other boxes on this specific section.
Step 2: Go to the page’s settings and match the settings to the below criteria and apply the settings once they’re changed:
Section Height: 10
Content Width: Large
Content Alignment: Middle
Step 3: Now we need to grab the section idea to input into the code snippet. To do this, you’ll need to select Inspect (Google Chrome) or Inspect Element (Safari) by right-clicking the image card (Not the page or section). When the console pops up, you’ll be looking for the line that says:
Copy and paste the number and letter mixture between the quotation marks. This number will be used to replace PAGE-SECTION-ID-HERE inside of the following code snippet.
Step 4: Next we’ll go to the CSS Design that’s at the very bottom of the Design tab. We’re going to paste the code at the bottom in the CSS Editor. Make sure to change the two areas that say PAGE-SECTION-ID-HERE with the code you just copied from the console.
// Image Card Code Snippet //
[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;
}
}
//End of Code Snippet//KABOOM!! You now have a full width image card. Remember that if you want to add to this page, you need to add another section.
If you want, you can change the padding also to play around with the design of it.
Thanks for checking us out and if you want a Certified Squarespace Designer for your website, check us out here!
Check out this plugin at Ghost Plugins
