Flatiron: Reduce padding between the header and site content?

I’m using the Flatiron template, how would I reduce the padding between the header and the content below it?

There are tonnes of questions on the forum for this, but none of the code snippets I’ve found have actually worked for me. I’ve tried using this, which does work:

.image-block { margin: -40px 0px -20px 0px; }

However I have an image gallery on one of my pages and it does not work for that unfortunately.

Can anyone help with this? If there’s a way to do it via adding the code to the Page Header Code Injection in the individual pages that would be absolutely perfect. Failing that if I need to add it to the custom CSS section that’s fine too.

Thanks!

Please give the URL to your site so we may examine the code.

Sure thing! The site is here:

https://kel-corbett.squarespace.com/

Password to view the site is: password

Hi Kel, can you tell me how you were able to get your image gallery to extend to the outer reaches of the screen? I'm trying to reduce the size of the page margins on my site.

Thanks!

Looking at your site with the browser’s Element Inspector, it appears that there is no margin between the bottom border of siteTitle and the top border of the main content Container, and the same for nav. There is padding within siteTitle and within nav but the amount of padding appears to be different.

SQSP counsels against using Custom CSS to reposition elements by altering margins and padding.(How should I use custom CSS?) If, nonetheless, you want to experiment with it, try:

.siteTitle {
 padding-bottom: 20px;
}
#nav {
padding-bottom: 5px;
}

Experiment by adjusting the pixel values. May I suggest that you create a Test page for experimentation (duplicate an existing page, retitle it Test, set its urlSlug to /test, deselect Enabled and drag it to the Non Linked section) and enter the CSS code in Test's Page Header Code Injection wrapped in <style> tags. That way your live site remains unaltered until you are satisfied with the code and put it in Custom CSS (without the <style></style> tags).

You might also experiment with:

#container {
 margin-top: 225px;
}

Thanks for the help guys, but unfortunately none of that code is working for me…

I’ve tried putting it into the Page Header Code Injection, and into custom CSS. But no joy. Any ideas as to why it’s not working?

Awesome, thanks so much! This code worked perfectly. I put it into the page header code injection, with this addition:

<style>
#container-content {
 padding-top: 20px !important;
}
</style>

Legends! Thanks

To reduce the gap that appears at the bottom of an Index Page if you're viewing the site in mobile or tablet view, here's the code you need!

@media only screen and (max-width: 768px) {
 #container {
   margin-bottom: 0px !important;
 }
}

Select Design, Custom CSS, paste the above code and save your changes!

@octopus how do I have this work on every page except my main gallery page?? works perfect on all the pages but my gallery page.

@Kel THANK YOU for figuring this out!! I have been trying to figure this out for days and your code worked. Thank you thank you thank you. For reference, this one worked for me: