Jump to content

remove padding around images / image blocks

Recommended Posts

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

remove_white_space.png

Edited by rupert34
Link to comment
  • Replies 13
  • Views 5.6k
  • Created
  • Last Reply

Top Posters In This Topic

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

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 

Link to comment
  • 2 months later...
  • 2 weeks later...

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.

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
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;
 }
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.