lu.diehl

Hey @ch71579,
Tyler here from SquareADA.com! Not sure about the SEO concerns or complex custom code mentioned in this tread, but to your original point about accessibility - the way it's setup is actually correct.
If we dig into WCAG (that's the international standard on web accessibility), we see from Technique H30 that "When an image is the only content of a link, the text alternative for the image describes the unique function of the link."
So in other words, for a summary block or grid of blog thumbnail images, it's more appropriate to describe the function of where that link goes (ie the name of the blog post) instead of a typical visual description of the image.
Hope this helps!
-Tyler
PS - If you looking for additional assistance with WCAG and ADA compliance, check out this free accessibility audit tool.

Original post in 2014:
Sometimes you just want one of your contributors to be able to add a table so that they can add some data, like a league table to a page or a post.
Squarespace usually make complex things seem simple (adding images to Galleries for example) but the simple task of adding a table in Squarespace is so challenging!
Yes, I know I can add a code block and add some HTML code to create the table. That's fine for me, but my clients don't want to learn HTML - they just want to edit a table like they would in any other application like MS Word - 'Create Table'.
I'm still hoping Squarespace will address this soon so we don't have to use online HTML table tools.
Update in 2024:
It is now 10 years later (yes that's not a typo... ten years later!! ⏳) and there isn't a Squarespace Table Block built-in yet. ☹️
The good news is that Michael (Squarewebsites) built a Table Block plugin. 
(These are affiliate links for products I use and love. If you make a purchase I may receive a tiny commission.)
This plugin adds a Table Block to Squarespace (both 7.0 and 7.1), allowing you to create and edit tables on the page with ease. You don't need to know any HTML table code, and it can automatically pull your table data from a Google Sheet, making it easier for clients to update their tables using a familiar tool!

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Here's a plugin from @ChrisSE :
https://schwartz-edmisten.com/shop/modern-mobile-menu-dropdown-for-squarespace

Folks just a heads up. For the freshest version of my code please see the following.
 

Add to Design > Custom CSS
/* mobile resize */ @media screen and (max-width:767px) { /* image */ div#block-yui_3_17_2_1_1627563480786_5210 { width: 50%; margin: 0 auto; } /* pagination */ h2.item-pagination-title { font-size: 16px !important; } }  

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:
1. Add this to Settings > Advanced > header code injection:
(Change the scroll height you wish to change the color, here it is set to 400 px)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script>  
2. Add this to Design > Custom CSS 
Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)
.Header{   background-color: blue!important;   position: fixed!important;   transition: 0.2s all linear;   -webkit-transition:background-color .4s;   -moz-transition:background-color .4s;   transition:background-color .4s; } .on-scroll{   background-color: red!important; } .Site-inner{padding-top: 50px;} Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:
/* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:
1. Add this to Settings > Advanced > header code injection:
(Change the scroll height you wish to change the color, here it is set to 400 px)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script>  
2. Add this to Design > Custom CSS 
Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)
.Header{   background-color: blue!important;   position: fixed!important;   transition: 0.2s all linear;   -webkit-transition:background-color .4s;   -moz-transition:background-color .4s;   transition:background-color .4s; } .on-scroll{   background-color: red!important; } .Site-inner{padding-top: 50px;} Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:
/* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

This is a great solution! Thank you.

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:
1. Add this to Settings > Advanced > header code injection:
(Change the scroll height you wish to change the color, here it is set to 400 px)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script>  
2. Add this to Design > Custom CSS 
Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)
.Header{   background-color: blue!important;   position: fixed!important;   transition: 0.2s all linear;   -webkit-transition:background-color .4s;   -moz-transition:background-color .4s;   transition:background-color .4s; } .on-scroll{   background-color: red!important; } .Site-inner{padding-top: 50px;} Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:
/* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

What's even more confounding, is that the controls are there. They simply don't work as yet. Social sharing is such an integral part of marketing for most of us, and it would seem to me that implementing this function should have been at the top of the list of things-to-do for the Squarespace team. 

@lu.diehl thanks so much! 

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:
/* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

@AThompson_social, to change the font color, follow the guidance from @lu.diehl but target 'Header-nav-item' rather than 'Header'. 

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:
1. Add this to Settings > Advanced > header code injection:
(Change the scroll height you wish to change the color, here it is set to 400 px)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script>  
2. Add this to Design > Custom CSS 
Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)
.Header{   background-color: blue!important;   position: fixed!important;   transition: 0.2s all linear;   -webkit-transition:background-color .4s;   -moz-transition:background-color .4s;   transition:background-color .4s; } .on-scroll{   background-color: red!important; } .Site-inner{padding-top: 50px;} Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

Hi @DaleBoettcherPhoto, the code I wrote before isn't great actually... I would try it differently this time. If you're looking to change it only in one page then add the code below to the page setting > Advanced instead of adding it the general Custom CSS.  If you're looking to change it all pages, add it to Design > Custom CSS and remove the <style> tags.
<style> @media only screen and (min-device-width: 640px){ .promoted-gallery-wrapper { height: 500px!important; } .sqs-gallery-design-stacked-slide { height: 500px!important; } .sqs-gallery-controls .next, .sqs-gallery-controls .previous{ top: 250px!important; } } </style> Let me know how it looks... if you need further help, please share a link to your website. 

Yes, you can actually change the min-device-width to whatever you want, but for general iPad layouts use 768px. 
//* For general iPad layouts *// @media only screen and (device-width: 768px) { /* Code goes here */ }  

Add to Home > Design > Custom CSS
@media screen and (max-width:640px) { .gallery-grid--layout-grid .gallery-grid-wrapper { grid-template-columns: repeat(2,auto) !important; } }  

The code above, to adjust the banner slideshow height was helpful and successful! Thank you @lu.diehl. However, I'm having the same problem as @Poerd and @Emmyk1with the remaining grey strip. I've tried using the code in this thread, but it doesn't work. Anyone able to help? I'm using the "Bedford" template.
 
 
 

Scratch my earlier question. I added this code to the CSS that @lu.diehl posted regarding banner slideshow height and the grey strip disappeared. Hope it works for those still having trouble!
 .sqs-gallery-block-slideshow{
    background-color: #ffffff;
    height: 450px!important;
}
 
 
 

@Monte63 - sorry for the late response. 
Let me know if this works:
.collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow { height: 450px !important; background-color: #FFFFFF; } @media only screen and (max-device-height: 640px) .collection-type-page.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow { height: 200px !important; background-color: #FFFFFF; }  

Yes, you can actually change the min-device-width to whatever you want, but for general iPad layouts use 768px. 
//* For general iPad layouts *// @media only screen and (device-width: 768px) { /* Code goes here */ }  

Yes, you can actually change the min-device-width to whatever you want, but for general iPad layouts use 768px. 
//* For general iPad layouts *// @media only screen and (device-width: 768px) { /* Code goes here */ }