Jump to content

Mdhanjal

Member
  • Posts

    1,065
  • Joined

  • Last visited

Posts posted by Mdhanjal

  1. 
    
    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.

     

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.