WillMyers

Hey @JoeGrossmann, happy to help out here. Try this bit of Custom CSS: /*Input Container*/ #page .ProductItem-details-checkout .product-quantity-input { display: grid !important; grid-template-columns: 1fr 1fr; align-content: center; column-gap: 17px; } /*Quantity Text*/ .ProductItem-details .quantity-label{ grid-column: span 2; } /*Price Text Container*/ #page .ProductItem-details-checkout .ProductItem-product-price { margin: 0; } /*Price Text*/ #page .ProductItem .ProductItem-details .product-price { margin: 0; } Here's a quick video going over how I got to this if you or anyone else is curious: https://www.loom.com/share/6e6bcb18bd3a459cbe49068caafe6548?sid=6f5ec74b-c9c5-413c-8cc4-9fb3dc2c171c

Hey gang, I took a stab at a different solution and it seems to be working on my end. Check out the CSS below if you're using Slideshow Full, I also have some CSS in an article here if you're using Slideshow Simple -- it's the same idea with a few small tweaks. Basically I'm using CSS animations instead of transitions. Seem to work better since the slides are getting moved around in the DOM. Watch this if you're curious. Let me know if there are any issues, I'll keep iterating as I can. Will /** * Slow Cross Fade * Gallery Type » Slideshow Full * From Will-Myers.com **/ #sections .gallery-fullscreen-slideshow[data-transition="fade"] { --duration: 2s; figure, .gallery-fullscreen-slideshow-item-src{ opacity:1; } .gallery-fullscreen-slideshow-item{ visibility: visible; } figure:last-child { animation: fadeIn var(--duration, 2s) ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } }

@DotcomMarket Keep the CSS in the Custom CSS area, that should work as normal. You can place the JavaScript in a Markdown Block somewhere in a section in your Footer area though and that should work.

Thanks @paul2009! @jorgeamrls, my mega menu plugin is one of my most popular ones. It can’t recreate the mobile menu exactly as drop-downs, as you have shown, but it follows the normal Squarespace structure on mobile where you can click into the folder and you can display your mega menu content there. If you have any questions at all you can contact us via my support page too.

Thanks @Ziggy! @Nikolas361, if you're interested. I have an article here about the different types of Comments you can use in the different areas: https://www.will-myers.com/articles/adding-comments-to-your-code-in-squarespace

Happy to help, what page do you have this installed on? I'll need to look there to help troubleshoot. Feel free to submit a ticket here as well if you'd like: will-myers.com/ask

I've noticed this in the backend due to the way to way URL's get addended to the URL, but smooth scrolling has always worked on the live site. Is smooth scrolling not working on your live site?

Hey @MarianaGR, I just put together a tutorial on this. Check it out here: https://www.will-myers.com/articles/perfect-anchor-links-in-squarespace

Huzzah!

What aboutttttt This? /*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .image-block:hover .design-layout-poster { transform: rotateY(180deg); } .design-layout-poster .intrinsic{ z-index:0; } .design-layout-poster figcaption{ z-index:1; } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ }

Ok Try this bit of code instead. You will probably want to change the background from black. /*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .design-layout-poster:hover { transform: rotateY(180deg); } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ }

Can you share a link to the site you're trying to do this on?

@cwilk180 Yup! @tuanphan is right, this can be styled through CSS.

hey @tuanphan, thanks for the recommendation. It's not possible invert mine, that would require a different HTML setup, but that's pretty cool and a good idea for a future plugin! @cwilk180, if your end up getting my plugin and have any questions let me know!

Hey! What I'd recommend is a bit of Javacsript to see if a user is on the search page, and if they are, then add a class to the body. Then you can add some Custom CSS that could hide the footer, or style it however you'd like! Place this in your site header code injection area. <script> if (window.location.pathname == "/search") { document.querySelector('body').classList.add('search-page'); } </script> Custom CSS: .search-page #footer-sections{ display:none; } Hope that helps!

Hey Larkin, gotta move that overlay with the image. .design-layout-poster img, .design-layout-poster .image-overlay{ transition: 1s } .design-layout-poster:hover img,.design-layout-poster:hover .image-overlay{ transform: rotateY(180deg); transition: 1s } .image-card-wrapper{ transform:rotateY(180deg)!important; opacity:0; transition: 1s; } .design-layout-poster:hover .image-card-wrapper { opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s; } Does that do it?

Hey, I've seen this pop up a few times. I think I've got a fix that will do it: <script> function switchDDMM() { let fields = document.querySelectorAll('.field.day.two-digits'); fields.forEach(field => { field.parentNode.insertBefore(field, field.previousElementSibling) }) } function switchMMDD(form) { let fields = form.querySelectorAll('.field.month.two-digits'); fields.forEach(field => { field.parentNode.insertBefore(field, field.previousElementSibling) }) } function switchOnSubmit(){ let submitBtnArr = document.querySelectorAll('.form-button-wrapper'); submitBtnArr.forEach(submitBtn => { let form = submitBtn.closest('.form-block'); submitBtn.addEventListener('click', function(){ switchMMDD(form); }) }) } window.addEventListener('load', function(){ switchDDMM(); switchOnSubmit(); }) </script> <style> .form-item.fields.date.error .field.month{ left: calc(3.5rem + 2%) } .form-item.fields.date.error .field.day{ left: calc(-3.5rem - 2%) } </style> I've got a tutorial that goes over how I built this. You can check it out here: https://www.will-myers.com/articles/switching-the-day-and-month-field-on-squarespace-forms

😂😂 That is amazing... Looks like my code is firing before the body is loaded. Let's add an event listener to wait until the entire page is loaded, then run the code. <script> if (window.location.pathname == '/search'){ window.addEventListener('load', function(){ document.querySelector('body').classList.add('sqs-search-page') }); } </script> Let me know if it's still giving you issues.

Great question, Spongebob! (that's a fun sentence to write) I couldn't find any unique classes on the search page we can target, so we'll have to add one through Javascript. Add this to your Settings » Advanced » SITE Header Code Injection area <script> if (window.location.pathname == '/search'){ document.querySelector('body').classList.add('sqs-search-page') } </script> What this code is doing is checking the URL of the page and if it ends in '/search' then we're going to run that function below which adds a class of 'sqs-search-page' to the body of the HTML. So make sure you have this in your Custom CSS area. .sqs-search-page .header-title-logo img { filter: invert(1); -webkit-filter: invert(1); } .sqs-search-page .header-actions-action a { color: #000 !important; } Let me know if that does it!