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

How to hide code block??

Question

How do you hide code blocks from showing up as white space on your website?? This seems like a huge oversight on behalf of Squarespace. Unless there is an obvious way to do it I haven't found yet?

I have code blocks for my anchor links that obviously have to go in specific spots on my page and there's no place for them to just be inline with something else. And when I use "display: none" in the custom css, they stop working.

Any help would be greatly appreciated

Thanks!

Edited by zaw88
Initial Revision

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

It's not always necessary to hide a Code or Markdown Block. For example, if you've added an ID for an anchor link, it could be added with the code for the title of that section. For example:


<h2 id="myID">Heading</h2>

If you really do need to remove the spacing created by the Block, you'll need to remove the set the default 17 pixels of padding that appear on each side.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


Link to post
  • 0
On 7/17/2019 at 2:02 PM, zaw88 said:

How do you hide code blocks from showing up as white space on your website?? This seems like a huge oversight on behalf of Squarespace. Unless there is an obvious way to do it I haven't found yet?

I have code blocks for my anchor links that obviously have to go in specific spots on my page and there's no place for them to just be inline with something else. And when I use "display: none" in the custom css, they stop working.

Any help would be greatly appreciated

Thanks!

I have this exact same question. It didn't mean anything when I was only using 1 link on the page. But now I have three anchor links and you can clearly see the space between the line above and the image below (https://www.callummckirdy.com/resources)

In answer to @paul2009 I have no heading that I can hide this behind unless I change the floating heading over the image which I don't really want to do.

So I ask again, like @zaw88 did, is there a way to hide these spaces?

Thank you.

Share this post


Link to post
  • 0
7 hours ago, beren said:

I have this exact same question. It didn't mean anything when I was only using 1 link on the page. But now I have three anchor links and you can clearly see the space between the line above and the image below (https://www.callummckirdy.com/resources)

In answer to @paul2009 I have no heading that I can hide this behind unless I change the floating heading over the image which I don't really want to do.

So I ask again, like @zaw88 did, is there a way to hide these spaces?

Thank you.

Use this CSS

div#block-yui_3_17_2_1_1583627817214_9605 {
    padding: 0;
}

How to find block ID. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
8 hours ago, beren said:

How do you hide code blocks from showing up as white space on your website?

If you really want to hide ALL code blocks then you can add this to Design > Custom CSS and it will remove the space created by the Code Block itself (17 pixels of padding around it):

.sqs-block.code-block.sqs-block-code {
  padding: 0;
}

Note that in your case, you have also added a paragraph (within the Code Block). For example, this is one of them:

<p id="cb-paper"> </p>

You'll therefore need to hide the space created by this too, using something like this:

.sqs-block.code-block.sqs-block-code p {
  margin-block-start: 0;
  margin-block-end: 0;  
}

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


Link to post
  • 0

Thanks for the CSS @paul2009. It worked perfectly for me. 


<table style="width: 430px;">
<tbody>
<tr>
<td width="288" style="width: 420px;">
<p style="color: #43414e;">Heather Hamilton</p>
<p style="color: #43414e;">Founder, Resume Insider</p>
<div style="color: #bc8420;">
<p><a href="https://resumeinsider.net/" style="color: #43414e;">Website</a>&nbsp; |&nbsp; <a href="https://www.facebook.com/resumeinsidernet" style="color: #43414e;">Facebook</a>&nbsp; |&nbsp; <a href="https://www.linkedin.com/in/heatherhamilton/" style="color: #43414e;">LinkedIn</a>&nbsp; | <a href="https://about.me/heatherhamilton" style="color: #43414e;">About me</a></p>
</div>
</td>
</tr>
</tbody>
</table>

 

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