zaw88 Posted July 17, 2019 Share Posted July 17, 2019 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! Link to comment
paul2009 Posted July 17, 2019 Share Posted July 17, 2019 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
beren Posted March 8, 2020 Share Posted March 8, 2020 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. Link to comment
tuanphan Posted March 8, 2020 Share Posted March 8, 2020 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 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
paul2009 Posted March 8, 2020 Share Posted March 8, 2020 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; } Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
beren Posted March 24, 2020 Share Posted March 24, 2020 Thank you for this. I will try it out. Link to comment
HeatherLeigh Posted May 26, 2020 Share Posted May 26, 2020 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> | <a href="https://www.facebook.com/resumeinsidernet" style="color: #43414e;">Facebook</a> | <a href="https://www.linkedin.com/in/heatherhamilton/" style="color: #43414e;">LinkedIn</a> | <a href="https://about.me/heatherhamilton" style="color: #43414e;">About me</a></p> </div> </td> </tr> </tbody> </table> Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.