mbockmaster

I removed everything and tried again and it worked! Thanks so much!

Hi @CarolStatella, yes, you'll add it to the custom CSS area! You'll need to update the class to apply it to each element with a hover state.

Hi @mike.bj & @CarolStatella, I encountered this issue a while back and wasn't willing to lose sitewide animations to fix it. I found that adding the following media query (for each element with a hover state) was a better (albeit time consuming) solution. I've tested it on iPhone and it solves the issue. It may not be the perfect fix but hope it helps! 
@media only screen and (min-width: 768px) { .sqs-button-element--secondary:hover { /* styles here */ } }  

I see it already worked here, you try checking it again

I have the same issue. It's making it difficult for my client to manage.

@cro0w @moonlitdesign 
I'm trying to do something similar, but instead:
1. On scroll, the large red ARGUS logo, black rule, and nav slide up (the large ARGUS logo and rule are out of the viewport). The nav bar is now sticky to the top.
2. When you continue to scroll, the little red ARGUS logo slides/fade in at the top left of the nav.
Similar to this: https://www.capsule-design.studio/
Any help would be appreciated
site: https://toucan-tetra-fwm2.squarespace.com/
p: argus
I've also attached two screenshots. 1. On page load 2. When scrolled

Use this code
<script> $(document).ready(function(){ $('label.checkburger').click(function(){ setTimeout(function(){ $('#block-b3227c180fb77e2f7555').toggleClass('show-text'); $('label.checkburger').toggleClass('burger-test'); },2000); }); }); </script> <style> #block-b3227c180fb77e2f7555 h3 { position: fixed !important; bottom: 0; z-index: 999999999; color: #fff; left: 50%; transform: translateX(-50%); visibility: hidden; } .show-text h3 { visibility: visible !important; } #hamburger:checked~.menu a { opacity: 0; } label.burger-test + .menu a { opacity: 1 !important; } </style>  

Add to Last Line in Code injection > Footer
<script> $(document).ready(function() { $(".burger-inner").click(function() { $('html').toggleClass('disable-scroll'); }); }); </script> <style> html.disable-scroll { overflow: hidden; } </style>  

Because you are using custom burger menu, so we will need to use JavaScript code to achieve this.
Use this code to bottom of Code Injection > Footer
<script> $(document).ready(function(){ $('label.checkburger').click(function(){ $('#block-b3227c180fb77e2f7555').toggleClass('show-text'); }); }); </script> <style> #block-b3227c180fb77e2f7555 h3 { position: fixed !important; bottom: 0; z-index: 999999999; color: #fff; left: 50%; transform: translateX(-50%); visibility: hidden; } .show-text h3 { visibility: visible !important; } </style>  

Hi Amy! I've used Will Meyers' Tabs plugin to achieve this effect! Great plugin, and top notch support should you need it. 

I was looking into this previously and found this article! Hope it helps 🙂

worked ty!!! Just what i was looking for!

Hello! I'm hoping to get some help creating a blink and change text effect, like the attached. I supposed that this could be achieved with an autoplay summary carousel, but there must be a better way?
My site is: https://potato-goose-e48n.squarespace.com/
pw: bockmaster
(though I don't have much to see here yet) 
 
Screen Recording 2024-01-10 at 1.57.54 PM.mov

Add to Design > Custom CSS
/* Always show quick view */ span.sqs-product-quick-view-button { opacity: 1 !important; } Add this to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $("span.sqs-product-quick-view-button").html(function() { return $(this).html().replace("Quick View", "Buy Now"); }); }); </script>  

Try adding this code to Page Header
<style> figcaption.gallery-caption.gallery-caption-reel { position: absolute !important; top: 50%; margin: 0; left: 50%; transform: translate(-50%,-50%); height: 100%; display: flex; justify-content: center; align-items: center; color: white; } figcaption.gallery-caption.gallery-caption-reel>div { display: flex; align-items: center; justify-content: center; } </style>  

Try this as a solution, add to your Custom CSS:
@media only screen and (max-width:640px) { .blog-basic-grid .blog-excerpt p { white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-basic-grid .blog-meta-section { display:none; } } You can adjust how many lines the excerpt has by changing the 2 in this line -webkit-line-clamp: 2;
You may want to adjust the 640px depending on the breakpoint to match the one you used for the two column layout.
Please upvote if this has helped!

Try change the code to this (I added some class for page content, exclude footer)
<script> // Add an event listener to run the code once the DOM content has been loaded document.addEventListener('DOMContentLoaded', function () { // Select all elements with the 'accordion-item__click-target' class var readToggleButtons = document.querySelectorAll('#page article .accordion-item__click-target'); // Check if the buttons exist on the page if (readToggleButtons) { // Iterate through all the buttons readToggleButtons.forEach(function (readToggleButton) { // Add a click event listener to each button readToggleButton.addEventListener('click', function () { // Set a timeout to run the code after a short delay (50ms) to ensure the 'aria-expanded' attribute is updated before toggling the text setTimeout(function () { // Select the span element with the 'accordion-item__title' class inside the current button var readToggleSpan = readToggleButton.querySelector('#page article .accordion-item__title'); // Determine if the current button is expanded based on the 'aria-expanded' attribute value var isExpanded = readToggleButton.getAttribute('aria-expanded') === 'true'; // Toggle the text based on whether the button is expanded or not toggleText(readToggleSpan, isExpanded); }, 50); }); }); } // Define the 'toggleText' function that changes the text of the given element based on the 'isExpanded' parameter function toggleText(element, isExpanded) { // If the button is expanded, set the text to 'Read less' if (isExpanded) { element.innerHTML = 'Read less'; // Otherwise, set the text to 'Read more' } else { element.innerHTML = 'Read more'; } } }); </script>  

AH! Just after I posted this, I tried one more thing:
I had my .header-title-logo a set with 'width', but was using 'max-width' on the shrink. I changed them both to width and it's fixed! Phewf! 🙂

The accordion only allows a single title e.g. 'Read more' - but the expected behaviour is for it to toggle to 'Read less' or similar when the accordion item is open.
Add this code to your footer section in 'Advanced > Code Injection' (business plan required?) and it will apply site-wide:
<script> // Add an event listener to run the code once the DOM content has been loaded document.addEventListener('DOMContentLoaded', function () { // Select all elements with the 'accordion-item__click-target' class var readToggleButtons = document.querySelectorAll('.accordion-item__click-target'); // Check if the buttons exist on the page if (readToggleButtons) { // Iterate through all the buttons readToggleButtons.forEach(function (readToggleButton) { // Add a click event listener to each button readToggleButton.addEventListener('click', function () { // Set a timeout to run the code after a short delay (50ms) to ensure the 'aria-expanded' attribute is updated before toggling the text setTimeout(function () { // Select the span element with the 'accordion-item__title' class inside the current button var readToggleSpan = readToggleButton.querySelector('.accordion-item__title'); // Determine if the current button is expanded based on the 'aria-expanded' attribute value var isExpanded = readToggleButton.getAttribute('aria-expanded') === 'true'; // Toggle the text based on whether the button is expanded or not toggleText(readToggleSpan, isExpanded); }, 50); }); }); } // Define the 'toggleText' function that changes the text of the given element based on the 'isExpanded' parameter function toggleText(element, isExpanded) { // If the button is expanded, set the text to 'Read less' if (isExpanded) { element.innerHTML = 'Read less'; // Otherwise, set the text to 'Read more' } else { element.innerHTML = 'Read more'; } } }); </script>  

Replace your code with the code below
html body.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark::after { background-color: var(--sage) !important }  

I've been able to achieve this with grids! Still so much to learn about both flexbox and grids, but so grateful for everyone in this forum so I can continue to learn!

Yes, certainly frustrating, luckily these things don't generally happen very often, but that doesn't help if you experience it yourself.

It might come down to that. The client is managing her site now, so it's definitely frustrating to have to rebuild this because of a weird glitch on the SS side. 
Thanks for taking a look, you're always so generous with your time! I appreciate it.

Update: Two live chats. First chat ended without notice after disclaiming SS will not assist. Second chat said they would look into the issue and took my email address for follow up. Your chat said no one else reported the issue. Hmmmm. Let's keep chatting with them over the day (s).... 

I am on 7.1 as well. I will open a live chat to report the issue there as well. Fingers crossed all remedies soon.