Jump to content

Getting Rid of Extra Padding in Brine

Recommended Posts

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?

IMG_6658.PNG

Link to comment
  • Replies 4
  • Created
  • Last Reply

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

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

Link to comment

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

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

Link to comment

Archived

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

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