Jump to content

How to add code without a code block

Go to solution Solved by creedon,

Recommended Posts

Posted

I'm trying to create a homepage for a site that is very stripped down: just a full bleed gallery with an SVG logo above centered horizontally and vertically above. 

So far I've been able to do this by  using "display: none" to hide the header and footer, adding the SVG using a code block, and positioned and styled the SVG logo using CSS in the page header code injection. 

Everything seems to be working fine, except there is a blank white space below the gallery. The goal is to have the gallery full width and full height, and no scrollbar/ability to scroll. I think the issue is the section I had to add below the gallery to place the code block. 

Is there any way to avoid this? I wish I could somehow just add the SVG code into the html without using a section. As far as I can tell, it's impossible to add a code block to the gallery section. 

I tried using header CSS to hide the section div containing the code block, but that removes the custom code along with it. 

I feel like I'm so close, but this is driving me crazy. I'm open to any suggestions. Thank you so much in advance. 
 

Posted

not possible in squarespasce.

Hi ! I am Paramjeet kaur Top rated SquareSpace Web Designer and Web Developer with SEO For Web Sites. Working Now As freelancer With lowest Rate. Rate $20 per hour.  Till date, I have created over 300 + websites in Squarespace.  Contact Me    Email

Posted

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted (edited)

Set the Gallery section height to large.

Set the section with your SVG code height to medium.

Replace your CSS, make a copy somewhere, with the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>
  
#header,
#footer-sections {

  display : none;

  }

.page-section:nth-child( 2 ).section-height--medium:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ) {

  min-height : unset;
  
  }

.page-section:nth-child( 2 ).vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ):not( .editmode-changing-rowcount ).section-height--medium > .content-wrapper {

  padding : 0;
  
  }

.page-section:nth-child( 2 ).section-height--medium:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ) .fluid-engine {

  display : block;
  
  }

/* body { height: 100vh!important;   or  min-height: 100vh!important; } */

.centeredlogo { 

  fill : #FFFEFC;
  left : 50%;
  max-width : 600px;
  position : fixed;
  top : 49%;
  transform : translate( -50%, -50% );  
  width : 30vw;
  
  }

  /* HIDDEN ELEMENTS ON MOBILE */ 
/*@media only screen and (max-width: 768px) {.centeredlogo {width: 75%;}
}*/

@media screen and (max-width: 800px) {
  .centeredlogo {
    width: 62%;
  }
}  
  
</style>

Let us know how it goes.

Edited by creedon
version 3

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

@creedon Thank you so much for taking the time on this. So kind. 

I followed your steps, but it is still having the same issue but with more white below the gallery section. Maybe I misunderstood something? I checked and made sure the gallery height was set to L (and full bleed.) For the section with the code block, I had to set it to "fill screen" to set the height to Medium. Is that correct? 

I then replaced the header code injection CSS with the one you provided. Did I miss anything? 

I made a copy of the previous page before doing this. Here is the result: 

https://corn-bluebird-xx9w.squarespace.com/home-test-forum

  • Solution
Posted
Quote

I checked and made sure the gallery height was set to L (and full bleed.)

The gallery section is still set to height medium. Set it to large and Save.

The section with the code is set to large. It should be medium.

If those section heights aren't set correctly. Then the CSS code won't work.

I also updated my code. There was a missing ruleset.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

Setting a section to large makes it the height of the viewport.

Setting the section with code to height medium wasn't strictly necessary but I've gotten into the habit of leaving section settings at the defaults when making these kinds of spacing changes via CSS.

The basic trick here for the section with code is to override any element that is adding height or padding so that the section has an effective height of zero.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

@creedon Sorry, just thought I'd check back in because I noticed it's not working on mobile. Is that just a necessary limitation, or did I do something wrong? 

Again, all my thanks!

  • 3 weeks later...

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.