Squarespace: Full Width Image Card

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

Custom Website

We'll create a unique website design that suits the needs and image of your brand.

Website Redesign

We offer updates and improvements to existing websites to keep them fresh, competitive, and also converting for your target audience.

Ecommerce Websites

We craft user-friendly interfaces with a strong focus on user experience to create online stores with easy-to-use shopping functionalities.

Web Hosting Services

We provide one-year of free hosting solutions and domain name registration for our clients.

Multilingual Websites

We design websites that can be viewed in multiple languages so you can reach any audience you need with your message.

Copywriting Services

We provide professional copywriting for website content so you don't have to hire writers for converting content.

Atmospheric Thinking is a digital marketing company that specializes in and focuses on SEO. We believe that any business or brand should regularly have an SEO Strategy created that aligns with their goals so they have a great understanding of who their target audience is and how to better attract them and turn views into conversions. Set up a free consultation with us today!

Trending post

Solutions

Custom Website

We’ll create a unique website design that suits the needs and image of your brand.

Ecommerce Website

Strategies vary by region and target audiences are approached differently based on culture, language, location, and so much more.

Website Redesign

We craft user-friendly interfaces with a strong focus on user experience to create online stores with easy-to-use shopping functionalities.