Jump to content

Put a frame around the image stack block.

Recommended Posts

Posted

Site URL: https://modernbusiness.squarespace.com

Hi. 
Is there a way to put a frame around the image stack block + keep a 15px gap between blocks, + keep the same block  height? 

I found a code for individual image blocks. 
I need to put the frame around multiple image blocks and multiple pages. 
The idea in the attachment. 
 

AE740D08-A028-4DD0-958B-D7940E4DB605.jpeg

  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply
Posted
20 minutes ago, kristobans said:

Site URL: https://modernbusiness.squarespace.com

Hi. 
Is there a way to put a frame around the image stack block + keep a 15px gap between blocks, + keep the same block  height? 

I found a code for individual image blocks. 
I need to put the frame around multiple image blocks and multiple pages. 
The idea in the attachment. 
 

AE740D08-A028-4DD0-958B-D7940E4DB605.jpeg

Hi. I just review your website. you can use below code for it and remove your one. 

.design-layout-stack {

border: 1px solid #000;

padding: 10px;

min-height: 400px; // adjust min height here to make all block with same height.
}

and if you want to code the image block where you all ready code add. target the collection id and wrap your code within it. below is a code for the specific page and targets the image block. but this will applied to all type of image style so better way is to use the above code you can try both code and use the code which is best suitable for you.

#collection-607e58d7db63ee562a23b8e5 {
    .Main {
        .image-block {
            border: 1px solid #222;
            padding: 15px;
            border: 1px solid #222;
            min-height: 430px;
            margin: 2px;
        }
    }
}

Posted
7 hours ago, Agha_Waqas said:

Hi. I just review your website. you can use below code for it and remove your one. 

.design-layout-stack {

border: 1px solid #000;

padding: 10px;

min-height: 400px; // adjust min height here to make all block with same height.
}

and if you want to code the image block where you all ready code add. target the collection id and wrap your code within it. below is a code for the specific page and targets the image block. but this will applied to all type of image style so better way is to use the above code you can try both code and use the code which is best suitable for you.

#collection-607e58d7db63ee562a23b8e5 {
    .Main {
        .image-block {
            border: 1px solid #222;
            padding: 15px;
            border: 1px solid #222;
            min-height: 430px;
            margin: 2px;
        }
    }
}

Brilliant. Thank you so much. 

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.