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

Image Block: remove padding?

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

Edited by llogan

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 12

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)
Edited by subpar

Web and mobile developer.

Share this post


Link to post
  • 1

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

Edited by Kyle Bigart
Solved my own problem. posting for others.

Share this post


Link to post
  • 1

Does this work on a gallery block as well if you substitute “image-block” with “gallery-block” in the CSS?

Edited by Bodil V

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

I’ve searched for this answer everywhere! THANK YOU!

Edited by ggp

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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?

Edited by johansalvador

Share this post


Link to post
  • 0

I had problems with the padding at the bottom and tried adding different code in the CSS without any success.

I used Gallery image with 1 picture and it removed the padding that was causing me FRUSTRATIONS.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...