Getting Rid of Extra Padding in Brine

Hi All,

I am using the Sophia version of the Brine template. I am having some trouble with extra padding around some blocks. I was able to get rid of the extra padding when putting two large images side by side horizontally with the help of code I found on another thread (.sqs-block.image-block { margin-right:-20px; margin-left:-20px !important; })

However I still have not found a fix for mobile. There is still a gap between the two images. One is a regular image and the other is a poster. I am having the same gaping between the poster and a banner on both the computer and mobile. Any suggestions?

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.

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.

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.