Shadmon

You can use this code to Website > Website Tools > Custom CSS

.header-title-logo img {
    max-height: 86px;
}

Let me know if it works!

 

Here is the CSS code that will ensure your slider text is responsive on both desktop and mobile devices. You can add this code to Website > Website Tools > Custom CSS

#home-hero-slideshow-banner .Index-gallery-item-content-heading {
    font-size: 3em;
    padding-bottom: 5rem;
}
@media screen and (max-width: 640px) {
#home-hero-slideshow-banner .Index-gallery-item-content-heading {
    font-size: 2em;
}
#home-hero-slideshow-banner .Index-gallery-control {
    margin-top: -130px !important;
}
#home-hero-slideshow-banner {
    height: 45vh;
}
#home-hero-slideshow-banner .Index-gallery-item {
    height: 40vh !important;
}
}

Hey @GlynMusica I wanted to share that I’ve developed a Squarespace timeline plugin that might be of interest to you. Works on both versions (7.0 and 7.1)
The plugin is built with the Squarespace editor, so there’s no need for custom code. It’s user-friendly and designed to integrate seamlessly with your Squarespace site.
You can find the plugin here:

Vertical Timeline
https://squarestash.com/product/timeline-01/ and

Alternative Vertical Timeline
https://squarestash.com/product/timeline-02/
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.

Screenshot of Vertical Timeline:



Screenshot of Alternative Vertical Timeline:


 

@popofglitter Please use this default URL for users to stay on the same page.
/inquire Let me know if it works for you!

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, You can check out this solution here:
Let me know if it helps!

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';
}

Can you send me the URL of the website please, So that I can check.
Thanks.

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!

Nothing wrong with the code. Can you send the URL of your website so that I can check.

Sure, You can do that. Here is the updated code. Replace the data-section-id with yours. [data-section-id="123"]{ .section-background{ &::after { /*creating the element*/ content: ""; width:100%; height:100%; position: absolute; /*adding the image*/ background-image:url(image.jpeg); background-repeat:no-repeat; /*positioning the image*/ background-size:cover; background-position:center center; background-attachment: fixed; /*mobile*/ @media(max-width:787px){ background-position:center center; background-attachment: fixed !important; } } } }

Hi, You can check out this solution here:
Let me know if it helps!

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!

Hi, You can use Dancing Script. You can add this code to Website > Website Tools > Custom CSS
 
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
h4 {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

 

Hi Tim, Maybe you need to consider implementing a lightbox feature for the iFrame pop-up. This would activate when users interact with the button.

Hi, You can add this code to Website > Website Tools > Custom CSS

@media (max-width: 600px) {
.header .header-title--use-mobile-logo .header-mobile-logo img {
    max-height: 40px;
}
.header-announcement-bar-wrapper {
    padding-bottom: 5px !important;
    padding-top: 10px !important;
}
}

Let me know if it helps!

Please add this CSS code to your website; your popup will appear in the middle of the mobile screen. You can add this code to Website > Website Tools > Custom CSS

@media (max-width: 600px) {
.sqs-popup-overlay {
    top: 15% !important;
}
}

Hi @LucieGbt1993 You can add this code instead :

// 2000 milliseconds = 2 seconds -> You can change the number to delay. For example: 5000 will be 5 seconds.
<script>
setTimeout(function() {
    window.location.href = "/your-url";
}, 2000);
</script>
 

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!

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 !

@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!

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!

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!

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!