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

Getting Rid of Extra Padding in Brine

Question

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

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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)

Share this post


Link to post
  • 0

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)

Share this post


Link to post
  • 0
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.

Share this post


Link to post
  • 0
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. 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...