Jump to content

reducing padding between sections in version 7.1

Recommended Posts

Looking to reduce:

1) the padding/height of the page title section that is in-between the site header at the top and the galley image section (see America-East Coast page) 

2) the padding between the bottom of the gallery image section and the footer

Website is https://purple-chinchilla-4bnr.squarespace.com

Password London0220

Help will be appreciated as can't seem to find the right solution as it's 7.1 and most of the advice out there is for older versions

thanks

Edited by IvanOB
wrong site details given
Link to comment

/config is url for web owner.

1. Reduce padding page title - gallery

Add to Home > Design > Custom CSS

#page .content-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

2) the padding between the bottom of the gallery image section and the footer

Homepage or Project page?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks Tuanphan. Tried the 1st css code and no difference as the page title section is still quite large (i've only tried the page title on the first America-East Coast page as wanted to see if i could get it to work before having it on all the other portfolio sub-pages.

 

For (2) would want it on all pages except the homepage.

Link to comment
  • 1 month later...
On 1/6/2020 at 2:17 AM, IvanOB said:

in case the config weblink was showing it should be https://purple-chinchilla-4bnr.squarespace.com/ and password London0220

 

Have you solved yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi Tuanphan, yes used a combination of the below which may be longwinded but works fine

Code injection for the portfolio pages

<style>
.sqs-block-html {margin-top:0.5vh; margin-bottom:0vh !important;
}
</style>

<style>
.portfolio-grid-overlay {
    padding-top: 1.0vw !important;
}
</style>

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

 

Custom CSS for all pages

/*  decrease footer height  */
.page-section[data-section-id="5e404b652c320258133c629c"] {
    min-height: 0vh !important;
}
 

Link to comment
2 minutes ago, IvanOB said:

Hi Tuanphan, yes used a combination of the below which may be longwinded but works fine

Code injection for the portfolio pages

<style>
.sqs-block-html {margin-top:0.5vh; margin-bottom:0vh !important;
}
</style>

<style>
.portfolio-grid-overlay {
    padding-top: 1.0vw !important;
}
</style>

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

 

Custom CSS for all pages

/*  decrease footer height  */
.page-section[data-section-id="5e404b652c320258133c629c"] {
    min-height: 0vh !important;
}
 

you can combine

<style>
.sqs-block-html {margin-top:0.5vh; margin-bottom:0vh !important;
}

.portfolio-grid-overlay {
    padding-top: 1.0vw !important;
}

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
21 hours ago, benja231 said:

@tuanphan

I have a similar issue on 7.1. I have a text section (bottom-aligned), with a Gallery Grid of logos below it. What is the best way to close the padding between these two sections? Should I remove the bottom padding of the text section, or remove padding from the Gallery Grid. How would you tackle with CSS?

Site page is: https://themontgomerycode.com/

 

[data-section-id="5e52250d976c87268c02337b"] .gallery-grid.gallery-grid--layout-grid {
    padding-top: 0;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

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