abbiericher

Hi group, I don't know why but part of my CSS code is not working on my client website's : https://nicolas-beaudoin.squarespace.com/ password: freelance Here is the full CSS code in the CSS panel: html {scroll-behavior: smooth;} //-- SITEWIDE --// @heading-1: 35px; @heading-2: 25px; @heading-3: 20px; @heading-4: 16px; @paragraph-1: 16px; @paragraph-2: 14px; @paragraph-3: 12px; @citation: 16px; @source: 12px; @buttons: 12px; /* --- Do Not Edit Below ---- */ // Mobile Text Sizes @media only screen and (max-width: 640px) { h1 {font-size: @heading-1 !important;} h2 {font-size: @heading-2 !important;} h3 {font-size: @heading-3 !important;} h4 {font-size: @heading-4 !important;} .sqsrte-large {font-size: @paragraph-1 !important;} p {font-size: @paragraph-2 !important;} .sqsrte-small {font-size: @paragraph-3 !important;} .sqs-block-quote blockquote {font-size: @citation !important;} .sqs-block-quote .source {font-size: @source !important;} .sqs-block-button-element {font-size: @buttons !important;} } /* --- End Do Not Edit Below ---- */ .sqs-block-quote blockquote {padding-bottom: 30px;} // -- ACCUEIL -- // .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay { background-color: rgba(74, 75, 80, 1) !important; opacity: 0.6; } #block-yui_3_17_2_1_1729700160606_5173 { .image-overlay:hover { background-color: #90A2AB !important; } } #block-yui_3_17_2_1_1729700160606_7525 { .image-overlay:hover { background-color: #D2BD92 !important; } } // -- HYPNOTHERAPIE --// // Customizing the "A PROPOS" Section #block-yui_3_17_2_1_1724443020460_133344 { .accordion-item, .accordion-item, .black .accordion-item, .black-bold .accordion-item { padding: 0px 20px !important; margin: 0px !important; } .accordion-item__title {color: white;} div.plus {color: white;} .accordion-item__description p {color: white;} div.accordion-divider {color: white !important;} } // Adding Padding to Seperate Both FAQ Accordion @media screen and (min-width:641) { #block-yui_3_17_2_1_1724443020460_158198 { .accordion-items-container { padding-right: 20px !important; } } #block-19c059f5d759d3032f6d { .accordion-items-container { padding-left: 20px !important; } } } // Mobile View @media screen and (max-width: 641px) { #block-0da552e350cdde47cdd8 h2, #block-yui_3_17_2_1_1724443020460_85535 h3 { text-align: left !important; } section[data-section-id="66c903d0a6bf5b16127abc6e"] h2, h3, h4, p { text-align: left !important; } #block-0a8494b77572cd8c0ac7 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #block-yui_3_17_2_1_1724443020460_98417 { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } #block-yui_3_17_2_1_1724443020460_133344 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } #block-yui_3_17_2_1_1729175780951_28359, #block-yui_3_17_2_1_1729175780951_34566 { display: none; } #block-yui_3_17_2_1_1724443020460_85535 { .sqsrte-text-color--white { color: var(--headingMediumColor); } } } // -- RENOVATIONS --// // Adding Padding to Seperate Both FAQ Accordion @media screen and (min-width:641) { #block-fba6a74752366a22f875 { .accordion-items-container { padding-right: 20px; } } #block-82e1179531f1b5452d31 { .accordion-items-container { padding-left: 20px; } } } // Mobile View @media screen and (max-width:641) { #block-3c776f79736b1f581de4, #block-a558949067bc7f0aa30e { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #block-47ad9a06e41e6f6effee { border-radius: 15px !important; } #block-ee913627dfd62b999869 {display: none !important;} } // -- FOOTER -- // section[data-section-id="66c8f87520605f6aa8ad6f4d"] a { text-decoration: none; &:hover {text-decoration: underline !important;} } And here is the part that doesn't work: // -- HYPNOTHERAPIE --// // Adding Padding to Seperate Both FAQ Accordion @media screen and (min-width:641) { #block-yui_3_17_2_1_1724443020460_158198 { .accordion-items-container { padding-right: 20px !important; } } #block-19c059f5d759d3032f6d { .accordion-items-container { padding-left: 20px !important; } } } // -- RENOVATIONS --// // Adding Padding to Seperate Both FAQ Accordion @media screen and (min-width:641) { #block-fba6a74752366a22f875 { .accordion-items-container { padding-right: 20px; } } #block-82e1179531f1b5452d31 { .accordion-items-container { padding-left: 20px; } } } // Mobile View @media screen and (max-width:641) { #block-3c776f79736b1f581de4, #block-a558949067bc7f0aa30e { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #block-47ad9a06e41e6f6effee { border-radius: 15px !important; } #block-ee913627dfd62b999869 {display: none !important;} } I tried to open the website on a private window, still doesn't work... I really don't know what to do or what goes wrong! Any help would be appreciated!

Hi group, I'm trying the sticky menu code from Ryan Dejaegher: https://ryandejaegher.com/create-custom-sticky-menu-squarespace/ Everything works fine but I can't figure out how to add a smooth second sticky section. I would like if the black section with the names stick below the main navigation once it touch it and disappear when the section following all the artists photos touch the main navigation. I'm I clear? haha Here's are 3 screenshots with indications... The actual code in the footer : <script> (function () { window.addEventListener('load', function () { var header = document.querySelector('header'); var stickySection = document.querySelector('section[data-section-id="66fbf3aa2536b002618c5492"]'); var nextSection = document.querySelector('section[data-section-id="66f475fb3bd940176fffb07d"]'); var sections = document.querySelectorAll('section'); // Placer le header juste après la première section (comportement du code d'origine) if (header && sections.length > 0) { sections[0].after(header); } // Sticky Header comme dans le code d'origine if (header) { header.style.position = 'sticky'; header.style.top = '0'; header.style.zIndex = '10'; // Toujours au-dessus } // Sticky Section avec comportement d'apparition/disparition if (stickySection && nextSection) { var headerHeight = header ? header.offsetHeight : 0; // Calculer la hauteur du header stickySection.style.position = 'sticky'; stickySection.style.top = headerHeight + 'px'; // Juste en dessous du header stickySection.style.zIndex = '5'; // Sous le header // Observer pour masquer la section sticky quand la suivante apparaît var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { // Masquer la section sticky lorsque la section suivante apparaît stickySection.style.visibility = 'hidden'; } else { // Réafficher la section sticky lorsque la section suivante disparaît stickySection.style.visibility = 'visible'; } }); }, { root: null, // Observer par rapport au viewport threshold: 0.1 // Déclenche quand 10% de la section suivante est visible }); // Observer la section suivante observer.observe(nextSection); } }); })(); </script> And the code in the CSS panel : header { position: sticky; position: -webkit-sticky; top: 0; z-index: 10; /* S'assurer que le header reste au-dessus des autres sections */ margin-bottom: 0 !important; /* Supprime l'espace potentiel en bas du header */ } section[data-section-id="66fbf3aa2536b002618c5492"] { position: sticky; position: -webkit-sticky; top: 0; z-index: 5; /* S'assurer que la section sticky reste en dessous du header */ margin-top: 0 !important; /* Supprime l'espace potentiel en haut de la section */ transition: visibility 0.5s ease-out, opacity 0.5s ease-out; opacity: 1; /* Pour ajouter un effet de transition fluide */ } section[data-section-id="66fbf3aa2536b002618c5492"][style*="hidden"] { opacity: 0; /* Transition douce pour la disparition */ } Website: https://studio-le-joy.squarespace.com/ password: freelance Thanks for your help!!!!

The site is not online yet, but we could try maybe that url: https://fbq-conception.squarespace.com/projets-renovation-residentielle/dugre-charlevoix PW: freelance

Hi @tuanphan, Thanks for the code! I just used it on a client's website. One question though, how can I removed the em tag on the previous/next pagination? website: https://fbq-conception.squarespace.com/ password: freelance

Hi, I would like to create something similar to Big Cat Creative menu for one of my client. How is it possible? Thank you, Abbie Enregistrement d’écran, le 2024-08-23 à 16.12.48.mov

Hi all! I created line animation on my client's website (all the horizontal lines) but I would like the animation to be triggered only on scroll... and I don't understand how to do that... https://cassia-construction.squarespace.com/ password: freelance Here's the code I use for the line animation: // -- Using a code block -- // <div class="vl-h"></div> // -- In the CSS panel -- // div .vl-h{ height:0px; width:1px; border-bottom:1px solid #000; -webkit-animation: increase 3s; -moz-animation: increase 3s; -o-animation: increase 3s; animation: increase 3s; animation-fill-mode: forwards; } @keyframes increase { 100% { width: 100%; } } Thanks for your help!!!

@Beyondspace any idea?

How is that possible that on my screen and on my client's screen it is pixelated?

Hi yall, My client did a photoshoot recently and changed her website images, but some are pixelated on desktop (they are good on mobile)... I know that photos can be pixelated if too small and bad quality, but they are more than 2500px with 3MB size. So this is clearly not the problem... Any ideas? I checked online but didn't find anything conclusive. website: https://www.synapsemanagement.ca/

Yes. The first one is a full-width divider line section and the second (under the text) is a block line.

https://joy-studio.squarespace.com/ MDP: joy Maybe we could try with both section divider or block line. I have both on the one-pager

Hi yall, A client would like to create an animation with the section divider. While we scroll down, the line should go from the left to right. Tried to find a code online but couldn't find one... Thanks!

Hey guys, I need your help with a CodePen code that I used for one of my client. I integrated it with a code block, but there's still some changes I can't do! Even though I tried, i've been coding only for the past couple months so I'm not an expert (like you guys!!!) Here is the original CodePen link I used: https://codepen.io/shaneheyns/pen/qgKOVP Here is my client site's: https://mandarin-dandelion-tsj3.squarespace.com/tous-nos-cours-aquastar (password: freelance) As you can see, the concept and the bouncing effect works perfectly. The client loves it! But... 1. We would like to show only the tables "cours solo", "cours duo" and "cours de groupe" for the first 4 switchers 2. We would like them to be center-align as well 3. On the switcher "surveillance" we would like to have the 3 tables center-align 4. On the switcher "animation" we would like to have the table center-align 5. And the MOST IMPORTANT, I don't understand why I integrated the CodePen CSS file's, it changes the look of the entire page... In other words, the CSS in the code block should only be applied to the code block and not the entire page (if you look to the other pages, everything is fine in the good sizes) 6. If possible, could you help me with the mobile optimisation also? Thanks a lot!!! I'm so lost and I've been working on this pricing table for the past few days... 🫠

I suggested another solution and she loves it! But we wanted to add a border between the socials/logo/button area and the navigation (I took a screenshot and added a line where I wanted it). For future purpose, do you know how to do it? Because your method will add a border at the bottom of the whole header section.

Hi! My client was wondering if it is possible to add a single line between her logo and the navigation title. The line should be full width from the social icons to the button. I tried with a border-top property, but it isn't full width... Thanks all!