Getting Rid of Extra Padding in Brine

Ok - that makes sense. In that case, we don't need to target each block, we'll just target the home page by using the ".homepage" class. That way, image blocks on your other pages won't be affected.
 

.homepage .sqs-block.image-block {
    margin-right: -18px;
    margin-left: -18px !important;
    margin-bottom: -17px !important;
}

@media screen and (max-width: 640px) {
    .homepage .sqs-block.image-block:last-child {
        padding-top: 0 !important;
    }
}

Do let me know how that works for you.

Hi @Domanique.

You might consider targeting blocks more specifically using each block's block-id. By using the CSS as you have it, it'll apply to every block on the site (or on the page if using page-specific code injection). Are you sure you want to apply that CSS globally to all blocks?

Secondly, the horizontal gutter can be closed using a similar approach as you used to close the vertical gutter. However, as I said you'll probably want to target specific blocks for this.

Can you provide the view-only password to your site (necessary for others to view sites with password-protected visibility, such as sites in trial mode)? That will make it much easier to provide and test block-specific CSS.

23 minutes ago, brandon said:

Hi @Domanique.

You might consider targeting blocks more specifically using each block's block-id. By using the CSS as you have it, it'll apply to every block on the site (or on the page if using page-specific code injection). Are you sure you want to apply that CSS globally to all blocks?

Secondly, the horizontal gutter can be closed using a similar approach as you used to close the vertical gutter. However, as I said you'll probably want to target specific blocks for this.

Can you provide the view-only password to your site (necessary for others to view sites with password-protected visibility, such as sites in trial mode)? That will make it much easier to provide and test block-specific CSS.

Site: https://deer-cello-km2z.squarespace.com/home

Password: Graphics

Thanks for explaining that. I am hoping not to have any spacing and to have everything go from one block to the next. So far on the desktop version I am okay with everything except for the space between the first two text boxes and the text box that says "First, We Talk". On the mobile version there seems to be spacing in between just about all of the blocks which I am hoping to fix.

6 minutes ago, brandon said:

Ok - that makes sense. In that case, we don't need to target each block, we'll just target the home page by using the ".homepage" class. That way, image blocks on your other pages won't be affected.
 

.homepage .sqs-block.image-block {
    margin-right: -18px;
    margin-left: -18px !important;
    margin-bottom: -17px !important;
}

@media screen and (max-width: 640px) {
    .homepage .sqs-block.image-block:last-child {
        padding-top: 0 !important;
    }
}

Do let me know how that works for you.

This is exactly what I was looking for, thank you so much.