remove padding around images / image blocks

Hi There,

I'm new to squarespace, and find it pretty awesome, but there is one simple thing I just cannot figure out:

I would like to add an image within a container/element (ie a block) on a page, with the image automatically streching to full width of the browser, but without cropping any of the image width or height (like the banner background may do). I would then like to add another block with another image in the same manner, but without any gaps (ie a white border/padding) inside or between the blocks.

I've used this many times when building wordpress sites, etc, but have not been able to figure out how to do this in squarespace, even after extensive search....

Help would be highly appreciated!!!!

Many thanks....

I think it is default padding. Can you share link to page in screenshot?

Sorry, I can't share the link yet, as I'm still on a trial account...but I figured out what it was.

Even though I had removed all padding in the style settings, it kept a small margin at the bottom of each index page, don't know why.

But this css code gets rid of it:

.Index section:nth-child(2) {
   margin-bottom: -35px;
  }

5 hours ago, rupert34 said:

Sorry, I can't share the link yet, as I'm still on a trial account...but I figured out what it was.

Even though I had removed all padding in the style settings, it kept a small margin at the bottom of each index page, don't know why.

But this css code gets rid of it:

.Index section:nth-child(2) {
   margin-bottom: -35px;
  }

With trial plan, you can setup password & share url

I have found this code to be useful: 

.sqs-block.image-block {
   padding: 0!important;
 }

 .sqs-image-block-stacked .image-wrapper {
 margin:0 0 0 0;
 }
 .sqs-block.gallery-block {
 }

 .sqs-gallery-block-stacked .image-wrapper {
 margin:0 0 0 0;
 }

 .sqs-block.video-block {
 }

 .sqs-block.code-block {
   padding: 0px!important;
   margin-top: 0px;
   margin-bottom: 0px;
 }

Add whatever piece you need 

Did anyone solve this? if so, where do I inject the code?

1 hour ago, HH1992 said:

Did anyone solve this? if so, where do I inject the code?

Above code: Add to Home > Design > Custom CSS

I tried putting both of those into my Custom CSS and it didn't work for me. Does anyone know why?

I am trying to get my Images to not have a border but be right beside each other. 
Some of my image block are using code blocks so that I can add a hover effect.

On 7/11/2020 at 4:30 AM, BrennanJ said:

I tried putting both of those into my Custom CSS and it didn't work for me. Does anyone know why?

I am trying to get my Images to not have a border but be right beside each other. 
Some of my image block are using code blocks so that I can add a hover effect.

Can you share link? We can check easier.

I need to remove top and bottom padding on a specific image block and a specific text block using block IDs.  Can anyone give me the code and where to insert the block id?  Assume this goes into custom CSS?

5 hours ago, agjacs said:

I need to remove top and bottom padding on a specific image block and a specific text block using block IDs.  Can anyone give me the code and where to insert the block id?  Assume this goes into custom CSS?

Can you provide block ids?

On 10/6/2021 at 9:55 PM, tuanphan said:

Can you provide block ids?

how can you find/see the block ids?

On 4/21/2020 at 5:13 AM, Alexander1994 said:

I have found this code to be useful: 

.sqs-block.image-block {
   padding: 0!important;
 }

 .sqs-image-block-stacked .image-wrapper {
 margin:0 0 0 0;
 }
 .sqs-block.gallery-block {
 }

 .sqs-gallery-block-stacked .image-wrapper {
 margin:0 0 0 0;
 }

 .sqs-block.video-block {
 }

 .sqs-block.code-block {
   padding: 0px!important;
   margin-top: 0px;
   margin-bottom: 0px;
 }

Add whatever piece you need 

is there a way to make this page-specific?:

.sqs-block.image-block {
   padding: 0!important;
 }

On 6/12/2022 at 4:45 AM, cinnamoncat said:

is there a way to make this page-specific?:

.sqs-block.image-block {
   padding: 0!important;
 }

Replace your code with id

#block-id {
	padding: 0 !important;
}

Use this free tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en