KwameAndCo

You can use
body#collection-65f30f29d85f6f55dab01008 .header-nav-item:nth-of-type( 3 ), body#collection-65f30f29d85f6f55dab01008 .header-menu-nav-item:nth-of-type( 3 ) { display: none; }  

Chris has a plugin for this:
https://schwartz-edmisten.com/plugins/p/animated-rotating-text
Alternatively if you're comfortable copying, pasting and a bit of editing with code you could follow this:
https://codepen.io/kenwestphal/pen/xqRZYZ

There is a ::before pseudo element being affected by the hover state:
.tweak-global-animations-animation-type-flex .sqs-button-element--primary:not(input):hover::before, .tweak-global-animations-animation-type-flex .sqs-button-element--secondary:not(input):hover::before, .tweak-global-animations-animation-type-flex .sqs-button-element--tertiary:not(input):hover::before { clip-path: polygon(-2% -2%,102% -2%,102% 102%,-2% 102%); } To achieve your desired result you can just hide it and then apply your underline styling as normal
.sqs-block-button-element--small.sqs-button-element--tertiary.sqs-block-button-element::before { display: none; } You might need !important.

Cool designs!
You can use the following.
/*Squareskills product page reorder*/ #pdp .collection-content-wrapper { display: flex; flex-direction: column; } .collection-content-wrapper .ProductItem-additional { order: 1; } .collection-content-wrapper .reviewsSection { order: 3; } .collection-content-wrapper .productItem { order: 2; }  

This would be a bit of a headache sitewide as you potentially have to manually assign classes to everything or use a wildcard plust !important.
Most elements have the following inline CSS for transitions:

So you'd essentially need to do something like:
/*Squareskills change animation timing*/ .blockclass, .anotherblockclass { transition-duration: YOURTIMING!important; transition-delay: YOURTIMING!important; } In theory, for your use case it would probably be:
#blockid .fluid-image-animation-wrapper { transition-duration: 1.2s!important; //slower slide in transition-delay: .3s!important; //increase slightly to stagger } With each subsequent block having a longer transition delay than the last.
However, you may also want a media query so this is only on larger screens where they display inline as on mobile, where they are stacked, they will naturally fade in in sequence.

This will create an image with a 2:3 aspect ratio because it is 100%:150% (width:height).
Square would be 
.yourelement { padding-bottom: 100%!important; }  

It is simple but we need to see your site so we can give the correct code.
For example, your issue isn't padding so a guess would have led to something like:
#sectionid { padding-bottom: 0; } Or similar. Which won't do anything.
The issue is your text/line height. So you can use
#block-6e51bf5fa86fb5074371 h1 { line-height: revert; //might need an !important } Which will remove all space below the text and put it flush to the bottom of the section.

 
This is why it is essential to provide as much detail and context as possible, as well as a site link, even for things that look simple.

An image and a product are not the same thing.
What is your goal in adding all those tags? Unless they're searchable/used within your store, it's probably a waste of time - especially with so many.
Tags should be functional, serving a purpose rather than just keyword stuffing so you may find your time is better used elsewhere.

Can you explain in a different way or show another example.
It might just be me but it's not clear what you mean.
Also, you need to modify ".your-section-selector" in the code you've provided.
E.g. it could be "section[data-section-id="64517af57b71ed40c0646b36"]"

In that section, create a markdown or code block and put this in it.
<script> const linkDestination = "mylink"; let parentElement = document.currentScript.parentElement; while (parentElement.tagName.toLowerCase() !== 'section') parentElement = parentElement.parentElement; parentElement.id = linkDestination; document.querySelectorAll('.header-title-logo a, .header-mobile-logo a').forEach(link => link.href = '/#' + linkDestination); </script> Change "mylink" to whatever you want to use as the anchor for the section.
It will then replace the logo link with a link to this section on the homepage.
IF you wanted to do it on another page you'd have to tweak it but this should solve your issue.

Use
.sqs-gallery-design-autogrid .summary-content { padding: YOURPADDING; } .summary-title, .summary-excerpt, .summary-metadata--primary, .summary-metadata--secondary { transition: all ease-in-out .3s; } .sqs-gallery-design-autogrid .summary-item:hover { background-color: #BDDC02 !important; box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important; opacity: 1; transition: all ease-in-out .3s; .summary-title, .summary-excerpt, .summary-metadata--primary, .summary-metadata--secondary{ color:#1a3868; } } And you should be golden.

Try this in your Custom CSS
sectionid .fluid-engine { --grid-gutter: unset!important; } Get the sectionID and replace it in the above code and let me know how it goes.

It looks like the embed code works by finding an element on the page by its id and adding the player there. Both codes are targeting the same element so what happens is the first player loads fine, then the script for the second player runs and finds the same container and replaces the first.
Please share both of the codes you're using so I can confirm.
But it's likely a case of you just need to modify the code so it targets a separate player. If it's a JS embed you're getting from Buzzsprout you may also want to contact them asking how to run the script multiple times on a page.

Can you link to the site please?
You basically have 2 options:
1. Just reposition the button to the center or top with flexbox:
// Vertically Repositioned Single Button Mobile Overlay Nav // @Squareskills .header-menu-nav-folder-content { display: none; } .header-menu-nav-folder { justify-content: center; //change to flex-start if you want it at the top } 2. Remove the mobile nav and just have a button up top (may not work well with wide logos / large buttons) by overriding a bunch of CSS.
.header-display-mobile { display: none!important; } .header-display-desktop { display: flex!important; } .header-title-nav-wrapper { flex: 1!important; } .header-burger { display: none!important; } You will need to tweak to suit your website.
Plug either of the above into your Custom CSS.

Assuming you're on 7.1.
Go to custom CSS and add:
// Remove header from specific pages // @Squareskills #collection, #collection, collection { #header { display: none; } } Replace  #collection with the collection ID for any page(s) which you'd like to remove the header from. IF you'd like multiple pages, just separate them with commas as in the above example.
You can get the Chrome Extension to identify collection IDs free from Heather Tovey.
Let me know if this solves it for you.

You'll need to share the password too.
EDIT:
As much as I'd like to encourage the good practice of putting the password with help requests, looking at the line of CSS you shared, I realised what you were using.
You can watch the video below or just copy the CSS if you don't care for the logic.
 

Hi Ben, small world, I think we may have a mutual frind!
Anyhow, the issue is partly to do with having parallax turned on. The following should help:
@media (max-width: 640px) { /*Image - ensure min-height is larger than section*/ img.custom-fallback-image.loaded { min-height: 60vh; } /*Sectioon*/ #collection-612c9ebd5d3d1a3a142c6c28 .Intro.Intro--has-image, #collection-612c9ebd5d3d1a3a142c6c28 .Parallax-item { min-height: 50vh; } }  

@creedon is correct.
Once you've completed that, you can add css that will essentially be
#yoursectionid .content-wrapper { padding-left: 0; padding-right: 0; } You'll also want to think about the mobile layout though as it will automatically place the blocks in order from left to right. You may then wish to use
/*Shrink Images*/ #yoursectionid .sqs-block-image { max-width: 40%; } /*Align Image Left*/ #blockid1 { margin-right: auto; } /*Align Image Right*/ #blockid2 { margin-left: auto; } Where #blockid1 is the left image and #blockid2 is the right image.
Walkthrough video.

Hey @nwillis
Try changing
.desc-wrapper p:last-child>a+a { margin-left: 1em; } to
.desc-wrapper p:last-child>a+a { margin-right: 1em; } And it should fix it.
You may want to target that specific collectionid or blockid just in case.