And also, is it possible to make the legend appear only when hover?

@@josejoaofsantos I'm happy to hear that! And really cool that you were able to set the image to grayscale on hover, love it 💪 As for the spacing, if you're working with a <p> element for the description, it's likely it has some top margin, so you can use this to adjust it: .gallery-caption-grid-masonry p { margin-top: 0; } Then, to make the overlay/caption show up on hover, you can use something simple like this: .gallery-caption-grid-masonry { opacity: 0; transition: all .5s !important; } .gallery-masonry-item:hover .gallery-caption-grid-masonry { opacity: 1; } Feel free to adjust the .5s in the transition to modify the timing of the effect. Hope that helps!

@@beatrizecaraballo Thank you so much! Will try that asap. :)

It doesn't affect the loading screen animation, but it can be difficult to match the timing since you can't quite link them together. You'll need to manually set the delay and the outgoing timing of the goodBye screen animation to make it add up the length of the gif as best as possible. You can do so on this line of the code: animation: goodbyeScreen .5s forwards 3.5s cubic-bezier(.5,-.75,.7,2); Where .5s is the time the screen takes from being visible to going away, and the 3.5s is the delay given before the fade out begins. Hope that helps!

I'm afraid with Markdowns it's usually a case-by-case basis, but if you're using FE it's most likely the block being stretched out when the screen resizes. Feel free to send over a link to your page through beatrizcaraballo.com/contact if you'd like me to take a look! I'd be happy to point you in the right direction.

Thanks so much! I appreciate that. And that's a great question. You can totally make that happen fairly easily. You can add an extra class of your choice to the headings that you want to align differently, to counteract the alignment set through the global CSS. If you're working with an h4, for example, instead of the original structure that only has 2 clases: <h4 class="sp-headline slide"> You can add a third one that can be called anything you want. I'll just call it sp-headline-left: <h4 class="sp-headline slide sp-headline-left"> Then, inside the Custom CSS Window, you can target the headings that have that class and change the alignment: .sp-headline.sp-headline-left { text-align: left; } And of course, you can use the exact same method if you want to center-align the blocks instead, and keep the left alignment global. Just modify the name of your class and/or the value of the text-align property accordingly. Hope that helps!

I've been trying to figure this out for hours and I knew as soon as I left this comment that it would work 🤣 Thank you again for such a great tutorial.

Hey Sophie! I'm thrilled to hear you found the tutorial helpful. You're very welcome! And lol, that's how it always goes. Sometimes you just gotta freak out the code a little by putting it on the spot. Glad to hear everything worked out in the end 🙌 If anything else comes up, don't hesitate to reach out through beatrizcaraballo.com/contact so I can point you in the right direction!

You're most welcome! 🙌

Heya! Are you referring to the ones in the code? If so, those are placeholders. You'll need to replace them with the corresponding URLs of the icons you want to use. Hope that helps!

@@erneystacks with the values used in the tutorial the screen should cover the entirety of the browser window, regardless of the device size. However, if you want the image/gif to cover the whole area, you can adjust the background-size property and set it to cover instead of contain, and then change height and width from 190px to 100%. I hope this helps!

I'm glad to hear it! You're most welcome. As far as the GIF goes, if you want it to stop repeating you'll need to modify the file itself so that it doesn't loop endlessly and then reupload it. You can also modify the 3.5s of the goodbyeScreen animation to make it match the timing of your existing GIF. However, that will not be super accurate. I recommend going the first route instead. Hope that helps!

I'm glad to hear it! You're very welcome. I've updated the 7.1 version snippets to improve things for mobile and avoid backend editing issues! www.beatrizcaraballo.com/blog/sticky-content-navigation-squarespace

I've included a mobile layout snippet inside the post's code to address that issue!

@@beatrizecaraballo Thanks :)

You're most welcome! Without seeing the site I can't be sure what may be going on, but my guess is that there may be a typo either with the background-image url or the background-size properties inside the CSS portion. Double-check that those show up correctly and if the issue persists, feel free to reach out through the form on beatrizcaraballo.com/contact so I can take a look at the page!

I'm glad to hear that worked out for you! 🙌

Thanks so much! I'm glad you liked it 🙌 Tweaking the animation of the scrolling block is not straightforward because of how it's controlled in the backend. The easiest thing you could do is use an seamless horizontal pattern image to recreate your wave element inside a Code Block or an Image Block. If you need any help building that, feel free to reach out to beatrizcaraballo.com/contact I'd be happy to work with you!

Thanks! I appreciate that. And yes, absolutely. You can go the CSS route if you're only looking to change the text: #PAGE-ID .sqs-announcement-bar-text-inner p { position: relative; visibility: hidden; } #PAGE-ID .sqs-announcement-bar-text-inner p::after { content: 'New text goes here'; position: absolute; left: 50%; top: 0; transform: translateX(-50%); visibility: visible; } Just make sure to set your corresponding PAGE-ID in the snippets. And, if you want to change the text AND the URL, you can check out this code available inside the Snippet Directory: beatrizcaraballo.com/blog/alternate-announcement-bar-content-for-one-page Hope this helps!

@@beatrizecaraballo Wow. Awesome. Really appreciate it!

@govbradford my pleasure!

@@govbradford My pleasure! 🙌

Thanks so much! I appreciate it 🙌

You're most welcome! I'm glad you found the vid helpful 🙌

Hey Christina! You're most welcome and that's a great question. The quickest and easiest way to replace that text is with this CSS trick: .lessons-item-related-title { visibility: hidden; } .lessons-item-related-title::before { content: 'See more vids'; position: absolute; visibility: visible; } Just set the "See more vids" to whichever phrase you want to use. Hope that helps!

@@beatrizecaraballo Thanks Beatriz, you’re the best!

@@ninedesign108 My pleasure!

You're most welcome!

Hey Tiffany! You're very welcome, I'm glad it helped. There could be a few reasons why that's happening so I'd have to take a look at the site to be able to point you in the right direction. Feel free to send over a link to your site through the form at beatrizcaraballo.com/contact so I can take a look!

Hey Ryan! Thanks so much 🙌 From what you're describing, you'll most likely need to make a small adjustment to the HTML portion of your code, so that the distance between the fixed and looping words change based on the width of the latter. In general, the modification depends on a few factors so I need to see the structure before being able to point you in the right direction. Feel free to send over a link to your site by getting in touch through beatrizcaraballo.com/contact, so I can take a look!

@@beatrizecaraballo hey Beatriz 👋, Thanks for replying so quickly! I'll send it over through your contact form right now

Heya! Thanks so much and I LOVE that animation idea. You can totally do that. I just added the corresponding animation to the code section of the post, so you can grab it from there! It's option #3: www.beatrizcaraballo.com/blog/creating-animated-loading-screen-squarespace Make sure to include the base CSS as well, and option 1 or 2 for the "leaving" animation of the screen. Hope that helps!

Heya! It's my pleasure 🙌 That may be happening if the CSS was also moved to the header area, since that'll require <style> tags around it. In any case, you'll need to move ONLY the HTML part into the Cog icon of your page > Advanced > Page Header Code Injection area. The CSS can stay inside the Custom CSS window, even if you just want the loading screen on one page! Double-check that everything's in the right place and if the code is still being stubborn, feel free to send over your site through beatrizcaraballo.com/contact so I can take a closer look.

@@beatrizecaraballo This worked!! Thank you for explaining! :) I never knew there was that advanced code option within the page setting

​ @hayleesupple3405 My pleasure! I'm happy to hear that helped. I know, right? It's super hidden yet really useful for that kind of thing

Hmmm, I'd suggest double-checking that your chosen gallery slides have a Link set through the corresponding field in the backend, since (for this customization) the overlay will only show on those that do. If that still doesn't work, make sure you're using the "Strips" version of the code inside your Custom CSS window (there are different versions at the end of the post based on the available gallery layouts: www.beatrizcaraballo.com/blog/grid-gallery-overlay-squarespace And if that still doesn't work, feel free to send over your site through beatrizcaraballo.com/contact so I can take a closer look. Hope that helps!

Hey Meg! Oooh, love that question. And absolutely, that's totally possible! 🙌 You can simply flip the opacity values for the initial state and the hover mode and you'll have the overlay showing at all times, and then hiding on hover. Hope that helps!

Heya! You're most welcome 🙌 You can make the loading screen appear only on the pages you choose by adding the HTML portion to the corresponding Page Header Code Injection section (Cog Icon > Advanced Tab), instead of the global Code Injection section of the site!

You're most welcome! And that's a great question. You can use this to alter the aspect ratio of those thumbnails and set it to 16:9 : .lessons-item-related-wrapper .lessons-item-related-item-list .related-item .related-item-link-thumbnail { height: 0; padding-bottom: 56.25%; } .lessons-item-related-wrapper .lessons-item-related-item-list .related-item .related-item-link-thumbnail img { height: 100%; position: absolute; left: 0; top: 0; } Hope that helps!

@@beatrizecaraballo worked like a charm! Thanks so much!

@@eCKsplorer Whoop! You're most welcome 🙌

Thanks so much! There may be some additional factors affecting the spacing. I'll have to take a look to know what can be done. Feel free to send over your site through: beatrizcaraballo.com/contact !

You're most welcome! ☺

Thank you so much! I really appreciate that. I'm happy to know this was helpful 🙌

Oh yay! I'm thrilled to hear the tutorial helped with your issue 🙌. You're very welcome!

Hey Celine! You're most welcome 🙌 And that's a great question. You can do that very easily with something like this: .user-items-list-simple .list-item .list-item-media img { transition: all .5s; } .user-items-list-simple .list-item:hover .list-item-media img { transform: scale(1.1); } You can adjust the timing of the transition to make the effect more blunt or subtle, and then replace the transform or add any other property you want to create the hover effect! Hope that helps.

I came here for exactly this reason... thank you for the update.

Hey Sam! I know! The update seems to have happened this week, it's such a bummer. I'll be adding an alternative setup route to the blog post shortly 🙌

@@beatrizecaraballo thanks!!

You're most welcome! 🙌

You're most welcome! 🙌 I'm glad to hear that worked out for you. To be able to implement that kind of additional functionality you'll need to modify the code of the dropdown so that it "reacts" based on the visible or focused slide inside the carousel. That's something that falls outside of the scope of the tutorial so I'm afraid I can't provide support for that here. But, if that's something that you're interested in having on your site, don't hesitate to reach out: beatrizcaraballo.com/contact

Hey Michael! I'm happy to hear you found the tutorial helpful and thanks so much for the support, I really appreciate it 🙌. That's a really great question, I love the idea. I'll look into it and see if I can cover it in an upcoming vid! In the meantime, you can check out this tutorial on creating "responsive" text with the clamp() function: kzbin.info/www/bejne/h6u1eItom7WrfMUsi=MQLKWc2gei88omx-

@@beatrizecaraballo My absolute pleasure! Thank you for the quick reply and helpful link! I'm watching so many of your videos and learning so much!

You're most welcome! I replied to your email earlier 🙌

Lol, I'm so glad to hear this was helpful! You're very very welcome 🙌

I appreciate that, thank you! You'll need a hefty third-party plugin to make that happen, so I highly recommend checking out Squarewebsite's Universal Filter! It'll help you achieve exactly what you're going for and more: www.squarewebsites.org/squarespace-plugins/p/universal-filter

Thanks for sharing your code and troubleshooting steps, that's really helpful! The code is correct so, unless there's a typo, that doesn't seem to be where the problem is coming from. I'm afraid I can't pinpoint the issue without seeing the site, however I would recommend testing on a Guest Mode or Incognito window to see if the problem remains. It could simply be an editor glitch. If it's still not working after that, feel free to reach out through beatrizcaraballo.com/contact so I can take a closer look at your site!

Thanks so much! I'm glad you liked it. And that's a great question, you can absolutely do that. You'll need to: 1. Modify the original CodePen CSS code and remove aaaaaall the instances of the transform property (both with and without the -moz-, -webkit- and other prefixes) from every single @keyframes snippet. 2. Look for the top offset property inside the .sp-headline.slide b { } snippet and set it to 0 instead of .2em. 3. Adjust the padding: 15px included in the post code: www.beatrizcaraballo.com/blog/looping-rotating-words-heading-squarespace as needed, if applicable. Hope that helps!

I'm glad to hear it! The code you're sharing doesn't affect the behavior of the form, so it's probably something else. Go ahead and double-check that you have all the code needed, including the jQuery library, inside your site: www.beatrizcaraballo.com/blog/collapsible-squarespace-form-sections Both jQuery parts need to go inside the Code Injection section, and the CSS inside the Custom CSS window. If that doesn't work, feel free to reach out through beatrizcaraballo.com/contact so I can take a closer look at what may be going on!

@@beatrizecaraballo Yup, that was the part I was missing (thought I didn't need it 😅). Thank you!

I really appreciate that, thank you! I'm glad you found the tutorial helpful 🎉

You're most welcome! 🙌 And that's a great question. The snippet you shared works for 7.1 shop pages, so perhaps it's just a glitch in the editor. Try refreshing the page after adding the code or looking at your site via Incognito or Guest Mode. If it works there, you're all set! If not, I'm afraid I can't pinpoint the issue without seeing the site. You can try 1) making sure there are no typos in your code and 2), double-checking you've added it to the Custom CSS window. If none of those troubleshooting steps work, feel free to reach out through beatrizcaraballo.com/contact so I can take a closer look!

@@beatrizecaraballo Thanks very much for replying. May I send you a link to my site so you can see?

My pleasure! 🙌

Hey Lynette! I'm afraid I can't be 100% sure of what's going on without looking at the site, but from what you're describing it seems like the HTML is being added inside the Custom CSS window. Is that correct? If so, keep in mind only CSS can be added in there so no HTML tags should be present. If something else is going on and/or you need more help, feel free to reach out through beatrizcaraballo.com/contact so I can take a look at your page!