Wolfsilon

I've definitely experienced issues on 7.0 with grids and summary block thumbnails not sizing properly, usually because of the amount of items or spacing issues. Sometimes it's within the default CSS that conflicts with other areas of the page. The scripts for these blocks are weird sometimes, even if you don't have conflicting Custom CSS. This might help your problem: #collection-597767a8a5790a133c13e5de { #grid { margin-top: 55px !important; } } Hope this helps! -Dan

Hello there, Were you able to solve the issue? I took a look at your website and pages shown in the example. Everything looks fine on my end. Both on Google Chrome and Mozilla Firefox for Mac. -Dan

Hello, The example you shared and your description sounds like an "auto-scroll" or "scroll-snap" feature. You will need a Squarespace subscription that has Javascript enabled. If you have a plan that supports Code Injection. Navigate to Settings > Advanced > Code Injection. Copy and paste the following into the Header Code Injection field: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous"></script> <script> $(document).ready(function() { $.scrollify({ section: ".page-section", sectionName: ".page-section", easing: "jswing", scrollSpeed: 800, overflowScroll: true, setHeights: false, scrollbars: true, touchScroll: false, before: function() { $('.page-section').removeClass('active') current = $.scrollify.current(); current.addClass('active') }, }); }); </script> I would encourage you to explore the "Scrollify" website and experiment with different features, speeds, easings, and options. You'll also be able to understand how to control where and when the auto-scrolling should take place. The setup I've provided a bit advanced, but should get you up and running in no time. Hope this helps, -Dan

Hello there, Were you able to solve this problem? I tested it on my iPhone 11 with the latest IOS installed and it looked fine on my end.

Hello, Were you able to fix this issue? I loaded your page and it took about 3-5 seconds before the popup was visible.

Hello there, Were you able to fix this? I just tried it on Mozilla and Chrome for Mac and it seems to be working. I wasn't able to click through on the images or titles and I didn't get redirected to an empty page.

Hello, To achieve this effect with scrolling features, you will indeed need to have a website subscription that supports Javascript. Otherwise, you can not animate on scroll. You may still be able to add a circular image that spins around automatically but it won't be controlled by the user when they scroll on your page. -Dan

Hello there, Taking a look at your website, I can see the font on some elements. Taking a look at the code you provided, I see that there are some errors in your "font-face" calls. Try replacing them with this: @font-face { font-family: 'Romie-Regular'; src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff'); } @font-face { font-family: 'MonumentExtended-Regular'; src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff'); } Your original code had a "}" before the URL of the font. Hope this helps! -Dan

Hello, To lift this from the website you provided, we can copy the "src" for the iframe and use it to generate your own widget. I used a online tool called "iframe generator". Just place an embed block and insert the code. Then you can position it accordingly. <iframe src="https://candidatecentral.liberal.ca/hero-voter-id/?riding_id=59007" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe> Hope this helps, -Dan

Hello, To install this plugin, just make sure that you are using a javascript enabled subscription, I believe that it is available on the Business plan. After you've set up your layout, I would then install the plugin because it will sometimes cause issues with the editor mode and drag-and-dropping blocks. The code I will provide uses several 'Script libraries. The first being, Jquery, a Jquery Easing library, and the Scrollify library. Start by navigating on your website. Home > Settings > Advanced > Code Injection. To install the 'Scripts, copy and paste the following in your "Header Code Injection" field: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous"></script> Immediately following those links, you'll begin setting up the functions, events, and features for Scrollify. Copy and paste the following code: <script> $(document).ready(function() { $.scrollify({ section: ".page-section", sectionName: ".page-section", easing: "jswing", scrollSpeed: 800, standardScrollElements: ".swiper-wrapper", offset: 0, overflowScroll: true, setHeights: false, scrollbars: true, touchScroll: false, before: function() { $('.page-section').removeClass('active') current = $.scrollify.current(); current.addClass('active') }, }); }); </script> Here, we're telling Scrollify the objects or sections that should be identified and what the app should do with them. Essentially, we need each ".page-section" to be scroll-snapped into position. If you've taken a look at the Scrollify website, you'll see all of the options and methods that can be applied. You'll also have a better description of what they do. I've included a full code that I've used in the past because it provides a good example for demonstrating the flexibility of Scrollify. For example: I have a page that uses a "Swiper" carousel for a touch enabled/mouse-wheel scrolling gallery. Scrollify will let me identify this as a "standardScrollElement" and it won't snap to the next section when a user is interacting with that gallery. You can remove this if you have no "micro-interactions" on your website or use it for certain circumstances. Otherwise, when a user scrolls, it will snap it to the next section. Scrollify is good about knowing if a section is "long" and will let users scroll normally through longer sections or sections with long paragraphs by using the "overflowScroll" option, which is currently set to "true". The "scrollSpeed" is a number that you can play around with, the larger the number, the slower the scroll transition. The "easing" setting is set to "jswing" which is the name of the transition and part of the easing library we installed at the top of this code. You can view all of the easing names and swap them interchangeably if you prefer a different transition. You can find the names to swap here. Just use the drop-down menu to test them. For me, I found that when using the plugin on mobile devices, it wasn't always ideal for mobile users. Most mobile devices already have a "smooth" scroll when they flick up or down, so I disabled the ability for mobile users see the effect by setting "touchScroll" to "false". Scrollify defaults with updating the "hash" for each scrolled section and indexes them automatically based on the number of sections available on a single "page". Each section that a user is currently viewing has an "active" class. This is useful for triggering animations or other functions as they are scroll-snapped into view but you can remove this function by removing these lines: before: function() { $('.page-section').removeClass('active') current = $.scrollify.current(); current.addClass('active') }, As I said, there are many different options and default settings and I encourage you to experiment with them but hopefully this helps you get up and running! Hope this helps, -Dan

Hmm, The closest thing I can think of would be something like this. You'll still need to find the articles and manage them but you should be able to embed a single feed and allow it to update automatically.

Hello there, You can achieve this effect by targeting the button on the image block. You'll want to use a block identifier extension to determine which image the effect will be applied too. When I wrote this code for you, I was using an Image Poster block and my default button style is a pill shaped button which is why the border radius is "5em" -- so you may need to adjust this accordingly or remove it entirely. #Your_Block_ID { a { position: relative; } a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; border-radius: 5em; background: url("Your_URL"); z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; transition: all .5s ease; } a:hover:before { opacity: 1; } } The first 4 lines essentially determine that we should be targeting the "a" element inside of the parent Block ID. We then add a "pseudo layer" with an opacity of "0", making the element hidden. To "unhide" the element we use the hover property to change the ":before" layer opacity to "1" . I would encourage you to play around with the settings in this code and see what happens when you hover on the button, there are a lot of properties, filters, positions, sizes and plenty of other fun stuff to tweak. Hope this helps! -Dan

Hello, The column layout of the text and layout of buttons have been separated when they need to be in one column in order to stay together. The buttons are in their own row which is why all of them shift away from their respective text box/column on mobile devices. A possible solution is to edit the page and drag the button directly under the text of each column to "reset" the position. You should see a small blue line on the bottom border of the text box. If that doesn't work, you may need to try again, this time by removing the buttons and placing them back onto the page directly under each of text boxes. If you're still having issues, we will need to force this action with some CSS. -Dan

Hello, Using aggregator plugins and feed generators will depend on the content you are planning to share. Are you pulling content from other sources like social media and news articles? Are you looking for feeds generated from other locations on your website?

Hi Lauren, Could you share the URL to your website so that we can provide a code to achieve the desired effect. Without seeing the page it is much more difficult to assist you. Thanks! -Dan

Hello there, I just took a look at your website on Firefox and Chrome for Mac. The map loaded for me without having to refresh the page.

Hello there! You will need to have a Squarespace subscription that allows you to use Javascript. If you have one, you can use Scrollify.JS to animate between sections. We can't access your website config area, so without seeing your website, I can't give you a copy and paste code that will work. But hopefully this will point you in the right direction! -Dan

Hello Eric, I'd be more than happy to do this for you. Feel free to contact me if you still need help. Thanks, Dan

Hello there, To add an animated arrow down element, we'll need to use a Code Block and Custom CSS. 1) Create a Code Block and place the block directly underneath the "Get A Quote" button. 2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: <div class="arrow"> <span></span> </div> 3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS. 4) To animate and place the element onto your website you can paste the following into the Custom CSS box: .arrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .arrow span{ display: block; width: 30px; height: 30px; border-bottom: 3px solid #000; border-right: 3px solid #000; transform: rotate(45deg); margin: -10px; animation: animate 1.8s ease infinite; } @keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } } 5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties. You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right. You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. Let me know if you need any additional help. Hope this provided a solution for you! Cheers, Dan

.social-icons-size-small.social-icons-style-regular.social-icon-alignment-center .sqs-svg-icon--wrapper, .social-icons-size-extra-large.social-icon-alignment-center .sqs-svg-icon--wrapper { margin: 0 5em !important; } Adjust the "5em" accordingly. Hope this helps!

Hello! Could you please share a the URL to your website? Their are several methods that social icons are inserted into the footer and I cannot provide a working code without knowing how your icons are inserted. Thanks, Dan

Some templates on Squarespace version 7.0 offer an option in the settings menu to disable the mobile view entirely. If you do not have that option, then it becomes a bit tricky. It will then require some time consuming Custom CSS to prevent resizing of the blocks and sections on mobile devices.

Hello! To achieve this type of carousel with swipe controls and multiple slides-per-view, your best bet is to use "Swiper.JS". It is a javascript library that is highly customizable and packed with features. https://swiperjs.com/ Hope this helps.

Hello, From looking at your page, it looks like all of the images are inserted using the inline image block. Here is a simple hover animation for your images that can be applied in the Custom CSS tab. .design-layout-inline img { transition: all .5s; } .design-layout-inline img:hover { transform: scale(1.05); filter: grayscale(100%); border: 5px solid hotpink; } This is a simple and effective animation. Transition timing and easing functions can be anything you'd like. You can look up different easing timing functions using cubic-bezier(dot)com. Copy and paste the timing function just after the ".5s" but before the ";". Although it is not required to add Cubic Easing and just use the default settings. I used a transform "scale" animation that acts like a magnifier when the image is hovered but there are plenty of other transform properties that you can use -- try them out by swapping out "scale(1.05)" with other values or properties. The filter and border options are some of the other pieces of the hover animation that can be used to help the item stand out a bit more. You can also look up all of the different filters you can use as well. Hope this helps!

Hello there! I tried testing the code on my own site, which is a 7.0 website. The CSS selectors vary only slightly (".header-branding-logo...") but I was still able to replicate the problem. Try these different possible solutions. 1) Use the full url for the background image SVG. 2) Upload a transparent .png file for the logo and use your code to overlay the .svg. For me, the code you shared effectively removes the logo "block/container" entirely. If you were to add the visibility option back, you might see your SVG. 3) Try adding the full code with selectors instead of "...no-repeat left center". .header-title-logo a { background-image: url(https://example/svg/file/blah/blah.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; } You mentioned you've used this code before and that it works. Sometimes Squarespace is picky about which selectors you can use for different sections, pages, or elements. If none of these work, could you please share a url and visitor password so I can take a closer look. Thank you Jen! Hope these help.