Shadmon

Unfortunately, there is no dynamic approach. I suggest you use this tool to lowercase your URL. It will take you a few seconds and you will be safe. https://convertcase.net/ let me know if it helps!

You can add this code to Website > Website Tools > Custom CSS. Let me know if it helps!
#collection-66723495be7816578c67941e .Main-content {
    padding-top: 15px;
}

You can add this code to Website > Website Tools > Custom CSS. Let me know if it helps!
#collection-667ad5ed1ae7d900c586ab76 .Main--page {
    padding-top: 0;
}
#collection-667ad5ed1ae7d900c586ab76 .Main-content {
    padding-top: 30px;
}

Hi, Sure you can do that. You can add this code to Website > Website Tools > Custom CSS

@media only screen and (max-width: 767px) {
  .products .grid-item {
    width: 100% !important;
  }
}

Let me know if it works!

Sure, you can use the squaresapce icon. Just replace the value on this code :
Here is the dropdown icon code:

.Mobile-overlay-nav-item--folder::after {
    content: '\00BB';
}

Here is the before icon code:

.Mobile-overlay-folder-item--toggle::before {
    content: '\00AB';
}

Please add this CSS to your website: You can add this code to Website > Website Tools > Custom CSS

[data-section-id="662c41b962de8c5dc3b3d279"] .section-background {
    width: 100%;
    left: 0 !important;
    bottom: 0 !important;
}
Let me know if it works!

For fixing the height of your homepage video banner on mobile. Please add this CSS code.
Website > Website Tools > Custom CSS.
 
@media (max-width: 640px) { #home-top { min-height: 30vh !important; } #home-top .sqs-block-spacer { display: none; } }  
Let me know if it works!
 

If you want to change the overlay color of the background image by CSS. Then here it is:

[data-section-id="6545523923d13742e6e76fe4"] .section-background-overlay {
    background-color: #000;
}

But, I suggest you change the overlay color from (in Styles -> Color, and pick the relevant theme) as Ziggy mentioned.
I hope it helps!

Please add this CSS to your website: You can add this code to Website > Website Tools > Custom CSS

.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked + label {
    color: #fff !important;
}
Let me know if it works!

Hi, Thank you for letting me know. Please update this CSS line only :

#article- {
    padding-top: 0;
    margin-top: -80px;
}

Let me know if it works !

Hi @FTWSGEM
The issue you're facing with the disappearing scrollbar stems from the overflow:hidden; rule applied to the body element within your CSS.
So, Please remove this line from your CSS:

body 
{
  overflow:hidden;
}
It will fix your issue. Let me know if it works!

Here is the CSS code you can use. Website > Website Tools > Custom CSS.

#sidecarNav {
    width: 100%;
    z-index: 9;
}

Let me know if works for you!

@FTWSGEM Hi, You can add this CSS code. Just add your image there and it will show on hover.

.burger-inner:hover::after {
    background-image: url(add your image url here);
}
Let me know if it helps!

Hey, I have created a horizontal timeline plugin for Squarespace works on both versions (7.0 and 7.1) that you might find useful. It has two styles that you can see in the screenshots below. My plugin is fully compatible with Squarespace and you can customize every text and style from the editor.
 
Squarespace Alternative Horizontal Timeline
 

 
Squarespace Horizontal Timeline Plugin
 

 
I hope this plugin can be a valuable resource for those looking to add a timeline to their Squarespace site. Please feel free to reach out if you have any questions or need further assistance.