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

Anchor links - reduce padding on linked headers

Question

Site URL: https://nextcitylawyer.com/free-resources/the-truth-about-virtual-vacation-schemes

Good afternoon

I have added anchor links to the blog posts on my website in order to make it easier for visitors to navigate long blog posts.  The anchor link functionality works well, but the code block includes a substantial amount of top and bottom padding which breaks up the page.  It's more than the equivalent with a conventional h3 header.

<p id="attitude"><h3>
1. Attitude
</h3></p>

This is an example of the code that I have used on the linked page.  Is there a way to reduce the vertical padding between the blocks of the text?

Thanks for your help in advance.  I regard anchor links as a core feature of any blogging platform so it would be very useful to get some guidance on this issue.

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0
.sqs-block.code-block.sqs-block-code * {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.sqs-block.code-block.sqs-block-code {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

That will remove the top and bottom spacing from the code blocks and elements inside the code blocks.

If you have other code blocks that you want to keep the padding and margins on, this can be adjusted to target specific pages and/or code blocks.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...