Jump to content

Reduce gap between custom menu and sections

Go to solution Solved by tuanphan,

Recommended Posts

Hi all,

I have a custom css coded set of buttons on my site. These hide and show sections. I took the code from a youtube video and it has worked. The problem I have now is a bit too much space between the menu buttons and the sections. I've done everything possible manually, moved the menu downwards and moved the sections up (using out of the box functionality). I'd like to reduce the gap further. Is this possible? Probably easier if you see it! 

https://www.innosee.co.uk/strategicdirection

Many thanks, Tim

 

Link to comment
  • Replies 7
  • Views 766
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)

Move the buttons into their own section? I've now tried this, doesn't make any difference. 

I then added this to the site CSS to see if it was a page section issue. This did help a bit but not much. I'm wondering if it's the image in the code block that is top aligned? 

/*test*/
#page section .content-wrapper {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

 

Edited by Innosee
Update
Link to comment

Taking this further it seems to be a code block height problem. I have a fix for this but it's across the whole site instead of just a single code block (which I'd prefer)....

/*REMOVING THE SPACE UNDER CODE BLOCKS IN SQUARESPACE 7.1 WHEN USING FLUID ENGINE*/
html.squarespace-damask .sqs-blockStatus,
.sqs-block .removed-script {
  display: none;
}

I'd prefer to do this for just one code block at a time but this isn't working for me... any thoughts? I have replaced the YOUR-BLOCK-ID-GOES-HERE but I'm not sure what's wrong. 

/*REMOVING THE SPACE UNDER CODE BLOCKS IN SQUARESPACE 7.1 WHEN USING FLUID ENGINE*/
html.squarespace-damask #YOUR-BLOCK-ID-GOES-HERE .sqs-blockStatus,
#YOUR-BLOCK-ID-GOES-HERE.sqs-block .removed-script {
  display: none;
}
Link to comment
  • Solution

Use this code to Website Tools > Custom CSS to reduce space

section[data-section-id="665c373ea94053351201ea9e"] {
    min-height: unset !important;
    height: 100px;
}

section[data-section-id="665c373ea94053351201ea9e"] .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.