Jump to content

Put a frame around the image stack block.

Recommended Posts

  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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;
        }
    }
}

Link to comment
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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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