wallacewebdesign

In addition to the two sets of CSS supplied by @Beyondspace above I added the following:

/*Reduce Bottom Margin of Blog Item Top Wrapper */
.blog-item-wrapper .blog-item-top-wrapper {
  margin-bottom: -18px !important; /* SQS default set at 70px */
}

In my case there was a large space above where the Tags were displaying. I massaged it to -18px so it looked good in my case. Others' experience may differ, adjust accordingly.

Note that I do realize that the space between a Blog Post Title and the top of the Blog Post Content is controlled by the Edit Section "Header Spacing" slider, that slider has a bottom limit of 10px. So, even accounting for that there was still too large a gap for what I wanted. I decided to keep the CSS I used above and not have to adjust that Header Spacing slider for each blog post, one less thing to remember.

Thanks to @Beyondspace for the code. I appreciate it.

On 1/11/2022 at 10:43 PM, tuanphan said:

Hi,

It looks like you are adding to Design > Custom CSS

You need to Add to Settings > Advanced > Code Injection > Footer

Using this code (it works for me on SQS 7.1):

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

This is an important point: "Add to Settings > Advanced > Code Injection > **Footer**"

My next trick will be to customize the display styling, but getting the basics to work is the first step.

Thank you Tuanphan! As others have said, you're a wonderful resource!!!

On 2/24/2020 at 7:23 AM, tuanphan said:

 

Thank you. I just tweaked your code to work on my site, 7.1

Here is code

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 

Thanks Tuanphan!!! As usual you've got pretty much exactly what I needed and have been a life-saver. Thank you, thank you, thank you!

I had changed Call to Action button to a search block (found that trick elsewhere) and on mid-width displays the nav-menu was overlapping the search button.  Using your code I was able to increase the width at which the hamburger menu displayed, thus preventing overlap.

I had to make one change in order to have your code work in my situation. I changed "min-width" to "max-width". With that one change and no other changes it worked perfectly (other than experimenting until I found the width I needed it set to).

I too would like to be able to setup variable payment (not a donation) through a squarespace-based website. As it is the only way I know of is to use a PayPal account (or other third-party payment processor), create a payment page on the Squarespace-based website, and include a Pay Now button on that page. PayPal does have an option to accept variable payment, it's been a while, don't remember how hard it was to find that option, but I did find that option.

In this case, my client is a food based business and they would like to be able to accept payment for catering jobs directly through their Squarespace website.

I have submitted a feature request to Squarespace Support.

On 5/28/2020 at 1:24 AM, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
	$('.header-nav-folder-title[href="/services-1"]').click(function() {
		window.location = "/services";
	});
});
</script>

 

Thanks for the suggestion Meraki it seems to work perfectly for me.