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


Circle Member
  • Content Count

  • Joined

  • Last visited

Posts posted by Domanique

  1. 11 minutes ago, tuanphan said:

    Add to Home > Design > Custom CSS

    @media screen and (max-width:640px) {
    .homepage .design-layout-card .image-card>div {
        padding-left: 5%;
        padding-right: 5%;


    Thank you, this is working perfectly for the image card in the screen shot. However, there is an image card right underneath it (and on another page) and the margins don't seem to be aligning exactly the same? Any suggestions? 

  2. I need some help fixing extra padding in between two images on Brine when viewing on a mobile device. 

    The code I am currently using is: .

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

    Although I know this is only targeting the homepage. How can I target my services page (https://www.domaniquejazmindesigns.com/services) as well to get rid of the extra padding in between the two image blocks at the bottom of the page when viewing on mobile?


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

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

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


  • Create New...