Decreasing Section Padding Squarespace 7.1

Hello! I'm new to Squarespace and have never built a site. It's my first project and I am still working on it. Please help me to reduce padding at the bottom of the page. Also what's the best way to have the gallery at the top and the photo below in the same width of the page?

Thank you in advance! 

https://fox-youth-studio.squarespace.com

Password: Liam2019$

2 hours ago, Igrina2606 said:

Please help me to reduce padding at the bottom of the page.

Add the following to Design > Custom CSS.

main .page-section:last-child .content-wrapper {

  padding-bottom: 0 !important;
  
  }

2 hours ago, Igrina2606 said:

Also what's the best way to have the gallery at the top and the photo below in the same width of the page?

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  @media screen and ( min-width: 768px ) {
  
    .gallery-slideshow {
    
      padding-right: 0;
      padding-left: 0;
      
      }
    }
    
  </style>

This is for a v7.1 site.

If that isn't enough space removed we can get more aggressive.

Let us know how it goes.

58 minutes ago, Igrina2606 said:

Also what's the best way to have the gallery at the top and the photo below in the same width of the page?

See my previous post where I updated the CSS.

18 minutes ago, creedon said:

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  .page-section.vertical-alignment--top:not(.content-collection):not(.gallery-section):not(.section-height--custom).section-height--small>.content-wrapper {
  
    padding-bottom: 0;
    
    }
    
  </style>

If that isn't enough space removed we can get more agressive.

Let us know how it goes.

Thank you for your prompt answer. It helped on the page "about", but the other pages still have a big gat at the bottom... Would you please help me to fix the rest of the pages?

Ah you want the padding reduced site wide. I've updated my previous post again.

I'm trying to decrease the padding around the slideshow on the homepage so that there's not so much space between the header and gallery and you can see each image fully. site here: jordanbakva.com

Screenshot of current custom CSS I've inserted. Anyone know what I'm doing wrong?

@megshaina

Try the following for top padding.

.gallery-fullscreen-slideshow[data-section-id="5f83671f53dd1070217a6425"].gallery-fullscreen-slideshow[data-width="full"] {

  padding-top: 0;
  
  }

I'm thinking that even with reducing padding there isn't enough room to show the images fully onscreen.

Can you use medium or custom height?

Let us know how it goes.

Thanks, really helpful information.

@creedon

This worked perfect after trying so many other custom CSS on the forums. Thank you so much for your help! 

I have an excess of white space between my gallery reel and the text in the section below it.
editing "height  " did not achieve  any change and attempts to use some of the script shown in the answers previously have not helped.

Platform is  Zion template on 7.1

page is : https://www.victoriandrawings.com/home/prints

This occurs on two other gallery pages, but lets sort this one first!

I think that these are the segment id's for that page, but am unsure how to use them

gallery reel id;
"5f31ed47b3c9af0fb7d0b930"
page section.
"5f31ed47b3c9af0fb7d0b932"

text block:
#block-9ce5a34db96613d88a69

Could someone PLEASE help me with the exact script that I could copy and paste to fix this up?

My pages look bad as they are.

@victoriandrawings

This isn't a full solution but perhaps a start.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  .page-section.vertical-alignment--top:not( .content-collection ):not( .gallery-section ):not( .section-height--custom ) > .content-wrapper {
  
    padding-top: 0;
    
    }
    
  </style>

Let us know how it goes.

Thanks, Thomas

syntax error in line one...not able to spot it.

I have tried the following script, gleaned from previous posts...it works to a degree, but I feel the text block could be shifted...

here is what I used: any suggestions

[data-section-id="5f31ed47b3c9af0fb7d0b930"] {
    min-height: 10vh !important;}
[data-section-id="5f31ed47b3c9af0fb7d0b932"] .content-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

The block id is

#block-9ce5a34db96613d88a69

1 hour ago, victoriandrawings said:

syntax error in line one...not able to spot it.

Sounds like you are trying to add the code to Design > Custom CSS instead of Page Settings > Advanced > Page Header Code Injection for the page.

Please see Per-page Code Injection.

oops..you are right. Have done it, but not much change.

Is moving the text block up not an option?

Having the same problem. I'd like to reduce the space between the header and the page

11 hours ago, victoriandrawings said:

Is moving the text block up not an option?

That is where I took what little space I was able to easily remove.

Please if anyone else wants to pitch in here feel free!

I've not given up though! 🙂

Hi everyone, 

Could please someone tells me how do I make these two image sections without the gap in between on a particular page?

Thank you!!!!

@heyevolet

It can be done with a little CSS.

Please post the URL to the page with your two images on it.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Hi, I'm hoping to get some help removing some spacing in between header / section, and between sections on the Home and Services pages, below. Link is https://pineapple-stingray-bb4p.squarespace.com/, pw StillInDraft2208. Thanks!

8 hours ago, Ryan043 said:

Hi, I'm hoping to get some help removing some spacing in between header / section, and between sections on the Home and Services pages,

What happens when you edit the sections and choose the small section height.

Does that remove enough spacing for you? If not we can provide custom code to reduce spacing even further.

Let us know how it goes.

3 hours ago, creedon said:

What happens when you edit the sections and choose the small section height.

Does that remove enough spacing for you? If not we can provide custom code to reduce spacing even further.

Let us know how it goes.

Thanks for your reply- I've just changed the section heights to S, it's reduced it some but there's still a larger-than-liked gap on the Home page. The Services page looks great now.

(Home:)

55 minutes ago, Ryan043 said:

Thanks for your reply- I've just changed the section heights to S, it's reduced it some but there's still a larger-than-liked gap on the Home page. The Services page looks great now.

(Home:)

Add to Home > Design > Custom CSS

[data-section-id="5f6513d1bd90701b22243616"] .content-wrapper {
    padding-bottom: 0 !important;
}
[data-section-id="5f6515b684df667bd7b63e5c"] .content-wrapper {
    padding-top: 0 !important;
}

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS

[data-section-id="5f6513d1bd90701b22243616"] .content-wrapper {
    padding-bottom: 0 !important;
}
[data-section-id="5f6515b684df667bd7b63e5c"] .content-wrapper {
    padding-top: 0 !important;
}

 

Brilliant, thank you very much, that's worked perfectly.

4 hours ago, Ryan043 said:

Brilliant, thank you very much, that's worked perfectly.

I see footer form captcha

ERROR for site owner: Invalid key type

Hey all - I've tried just about every variation that has been on this forum and can't seem to fix my site! I'm stumped and need a bit of help with writing the code.  I'm trying to make the top padding of the section that has logos in it 10px. 

Can someone please help me with this?  Website is public: https://2tmarketing.com/

THANK YOU!