Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Image Block: remove padding?


Guest

Question

I have a nagging question that's driving me up the wall..

As you may know, adding an image in the blog using the image block (specifically) introduces padding around the image (around 10~15px?). While this isn't usually a problem, I'd like to remove (or better yet, customize) the space between, so that the images touch each other on all sides (like a photo wall). Is there a way to do this using the custom CSS function? It would seem like a fairly easy parameter to change. Any help would be greatly appreciated!

p.s. Adding multiple images really is a pain on SS6 without using the gallery block, as it turns out.. It'd be nice if you could upload multiple images at once as individual image blocks. That would make posting lots of images much more manageable. Oh well..

Link to comment
  • Answers 14
  • Created
  • Last Reply

14 answers to this question

Recommended Posts

Yes, custom CSS would probably be your best bet, try something like this, add it to the Custom CSS Editor:


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

If you want to customise the padding, you would add extra pixel values to suit your need, this for example:


.sqs-block.image-block {
 padding: 5px 10px 15px 0px;
}

Padding is a CSS shorthand, where one or more values can be controlled:

  1. padding-top: 5px
  2. padding-right: 10px
  3. padding-bottom: 15px
  4. padding-left: 0px (zero values can also simply be written as 0)

Web and mobile developer.

Link to comment

The above CSS will most likely (in my experience) only control the left and right padding on the image. You need to add the !important declaration in order to override the top and bottom padding from Squarespace.

This worked for me:


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

Link to comment

I tried the code provided by Kyle and it worked only on my Home page, but not on other pages where I really need it, such as this page.

I am using the Adirondack template.

I also want to decrease the padding between my header navigation menu and the slideshow on my home page. You can see how much space there is between the menu and the slideshow in this screenshot:alt text

Any ideas for both issues? Thanks.

Link to comment

I've removed the padding, but there was still a line between the images, it was the margin. This code did the trick:


<style>
 .sqs-gallery-block-stacked .image-wrapper {
 margin:0 0 0 0;
 }
</style>

Just add it to the Page Header Code Injection section in the Advanced Page Settings.

Link to comment

I am having the same issues with my templates. I’ve tried Shift, Flatiron & Galapagos, they all have the same padding around image or gallery blocks. I’ve tried to input the code in the Custom CSS area and in the page setting and nothing changes. What am I doing wrong?

This is what my website looks like www.johansalvador.com. Notice that after you scroll pass the first banner image there is a gallery, with lots of white space around it. I would like to reduce that space and flush the images, which are inside a masonry summary wall, against the width of the page.

I’ve used this code:


.sqs-block.image-block {
 padding-top:0px !important; padding-bottom:0px !important; padding-left:0px; padding-right:0px;
}

And this code:


.summary-thumbnail {
 margin-top: -30px;
}

And this code:


#page {
 padding: 0 !important;
 max-width: 100% !important;
}
.sqs-block.image-block {
 padding: 0
}

And this code:


<style>
#page {
 padding: 0 !important;
 max-width: 100% !important;
}
.sqs-block.image-block {
 padding-top: 0
}
</style>

That last code gives me a syntax error when I use the STYLE tag.

I’ve tried them all on all 3 templates and I get nothing!

Where do I go from here?

Link to comment

Archived

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

Guest
This topic is now closed to further replies.

×
×
  • Create New...