colin.irwin

Can you post a URL?

Try adding this to the custom css area, after any other code that may be there. Also remove your code.

 
@media only screen and (max-width: 768px) { body { h1,h2,h3,p,li,a,em,i,strong { -webkit-hyphens: none !important; hyphens: none !important; } .page-desc p { -webkit-hyphens: none !important; hyphens: none !important; } } }  

Here's what you need to do. 
First, wrap your code as follows
<script> window.Squarespace.onInitialize(Y, function(){ // Your code here }); </script>  
This will execute the code on each page load. 
Next, you may need to modify the code so that it only runs for the specific page. You do this by testing the body tag for the presence of the specific collection id. 

You can’t.  It makes the feature useless for anything other than brand new sites. 

You can’t.  It makes the feature useless for anything other than brand new sites. 

Don't claim to be an expert if you're not. 

Can you provide a link to your site?

There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  

The code below is part of a larger function that manages breadcrumbs for multiple sections of a client's site - blog collections, index pages and regular pages. 
This is just for the news section, which is a blog. 
First the JavaScript (this requires jQuery to be installed).  Also, it's for a 7.0 site with Ajax loading enabled. For 7.1 sites or 7.0 sites with Ajax disabled you would swap out the window.Squarespace.onInitialize(Y, function() for $(document).ready(function(){
window.Squarespace.onInitialize(Y, function(){ processBreadcrumbs(); }); function processBreadcrumbs() { var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; if (thisPath.includes('/news')) { $('.BlogItem-title').addClass('pad-site'); thisPage = $('.BlogItem-title').text(); $('.Main--blog-item .Main-content').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> &#187; <a href="/news-and-insights">News</a> &#187; <span class="truncate">'+thisPage+'</span></div></div>'); } }  
Now some Custom CSS. The first class, .pad-site, is just to format the blog post title to make it consistent with the rest of the site. 

The second class,  .truncate, tidies up long post titles so that the breadcrumb doesn't look too long. It stops the text at 320px wide and inserts an ellipsis to indicate it has been truncated.  It looks like this:

The third CSS rule that begins with [id^="breadcrumb"] contains the styling for the breadcrumb links. 
The Custom CSS
.pad-site { padding-top: 34px; font-size: 28px; } .truncate { display: inline-block; width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } [id^="breadcrumb"] { font-size: 16px; font-weight: 400; font-style: normal; font-size: 16px; letter-spacing: .1em; a { color: @black; border-bottom: 1px dotted @black; &:hover { opacity:0.8; } } }  
Finally, a caveat. I haven't tested this code on 7.1 sites. It's probable that it won't work by simply pasting it into your site and would need some editing to make it function correctly. 

Don't claim to be an expert if you're not. 

Try inserting this in your Custom CSS area and experiment with the increasing / decreasing the 1.5s animation value until you get the effect you want.
.homepage #block-yui_3_17_2_1_1611067680935_4040 { animation: fade-me-in 1.5s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} }  
 

@colin.irwin Thank you, that worked great!

Try inserting this in your Custom CSS area and experiment with the increasing / decreasing the 1.5s animation value until you get the effect you want.
.homepage #block-yui_3_17_2_1_1611067680935_4040 { animation: fade-me-in 1.5s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} }  
 

Don't claim to be an expert if you're not. 

Here's a slightly more concise solution, using jQuery.
The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.
The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).
+ This is a first question ----------------- This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too + This is a second question ----------------- This is a one line answer to the question above.
Questions should be styled as H2.
Then put the following code into your page's injection point:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script>
The first can be omitted if you already have a link to jQuery in your sitewide code injection point.
The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.
See it in action here - http://www.silvabokis.com/idea-testing/

You can’t.  It makes the feature useless for anything other than brand new sites. 

Can you provide a link to your site?

There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  

This puts a grey 'glow' behind your navigation links. Put it in your custom css. 
nav#main-navigation { text-shadow: 0px 0px 3px #aaa; } The parameters (in order) are
Horizontal shadow offset - currently set to 0px so it sits behind the image) Vertical  shadow offset - currently set to 0px so it sits behind the image) Blur radius - set to 3px so that it casts an omnidirectional shadow. Reduce this value to make the shadow sharper.  Color - currently set to a mid gray

You can’t.  It makes the feature useless for anything other than brand new sites. 

You can’t.  It makes the feature useless for anything other than brand new sites. 

<style> .post-meta { visibility: hidden } </style>

Here's a slightly more concise solution, using jQuery.
The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.
The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).
+ This is a first question ----------------- This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too + This is a second question ----------------- This is a one line answer to the question above.
Questions should be styled as H2.
Then put the following code into your page's injection point:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script>
The first can be omitted if you already have a link to jQuery in your sitewide code injection point.
The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.
See it in action here - http://www.silvabokis.com/idea-testing/

The default section padding is 96px at the top and bottom.
Insert this into your custom css and then tweak the @sectionpadding pixel value until you get the layout you prefer. 
@sectionpadding: 10px; .index-section .index-section-wrapper.page-content { padding-top: @sectionpadding; padding-bottom: @sectionpadding; }  

Can you post a link to the page in question?