Wolfsilon

Hello, Just glancing over your code, I think a stable and less-bloated edit to same custom CSS that you already applied would be correcting some of the coding errors and applying the following fix: @media screen and (max-width: 767px){ .section-background { height: 300px; position: relative; } Hope this helps, -Dan

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 there, When you install a custom font, you will also need to tell your website what elements should use the custom font. Typically, you'll be using: p, h1, h2, h3, a { font-family: "Your_Font_Name"; } These are the most common text elements. P = Paragraph h1 = Heading 1..., and A = Link Your header and footer most likely consists of multiple "a" elements and sometimes the code above won't be enough to target all of the elements on your website, so you may need to specifically target the header and footer sections by adding and overriding the default fonts: .Header a { font-family: "Your_Font_Name" !important; } Footer: .Footer a { font-family: "Your_Font_Name" !important; } If you'd rather use a global font change you can use: * { font-family:"Your_Font_Name"; } 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, For the logo, you can attach a different logo link from the same website provided in the CSS code you shared above (iconfinder). You can also download and upload it directly to your website using the Manage Custom Files feature located in your Design > Custom CSS tab. Simply upload the file, remove the previous URL and adjust accordingly. The link to the black and white discord logo is here. As for the underlined words -- I'm not sure exactly what you mean, but I would think that from looking at the code you shared, your underlined text problem is because you aren't targeting all of the proper elements or being "specific" enough for the code to be applied to the various elements, classes, and objects that are created when you add different blocks. The code you're using specifically targets the "<a>" element of ".sqs-block-html" class and I guess now we know that 10% of the blocks are not same. 😛 That being said, there are different blocks that have preset styles applied to them. Some of them will only be applied in certain circumstances. The Inline Image block, for example, sets a border-bottom for the "<a>" or "<p>" class (I forget which one changes the style) when you've added a link to the caption text. The text decoration won't appear to have any effect because of the border bottom style that is being applied. To solve this in the way you mentioned, you may have some success applying a blanket code. You could use a blanket code like: * a { text-decoration: none !important; border: none !important; } The "*" selects everything, used or not being used. Hope this helps!

Hello, Were you able to solve the issue regarding item removal? I did add $70 to my cart and didn't see the script activate. I also had no problem removing the items using the "X" feature. -Dan

Hello, Use Design > Custom CSS to apply some spacing. .ProductList-filter-list-item:last-child { margin-right: 1%; } Should do the trick. Hope this helps!

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! Squarespace recommends that you do display text, objects, or elements within the image itself. The image will be cropped at different screen sizes. If you have the ability to remove the text from image, you can add the banners and text information back in by using Squarespace text blocks and a little Custom CSS. That being said, I'd be more than happy to help you color and adjust your banner if you decide to go this route. This will be easier than using code to fix this issue. Hope this helps! -Dan

Hey Chris, I love using Squarespace and I enjoy developing/designing on the platform. I really do... but I've got a bone to pick with the SQS Audio Player. It's just trash and there's no getting around that. I'm sorry but it won't provide much in the way of usefulness for your needs. In my opinion, it needs a massive overhaul and redesign. I've been working on a custom Audio Player plugin for Squarespace myself but I digress. I would suggest using a third-party plugin like this. Alternatively, you could use SoundCloud too. Hope this helps!