AJZ

I had the same issue. Here's what worked for me. Be well.

I was hoping for a more minimalist form. It seemed I wasn't the only one, so wanted to share what worked for me. The following code took a lot of manipulation to get working (I'm sure Tuaphan, Paul, or others could improve it), but it's functional now. Main adjustments: "First Name" & "Last Name" is now just "Name" The input bubble for "Name" matches the length of other input bubbles "(required)" has been replaced with a red asterisk. To remove the asterisk as well, simply replace it with a space in the code. Here's the current code (place in footer code injection): <script> document.addEventListener("DOMContentLoaded", function() { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes.length) { // Hide and pre-fill last name fields var lnameFields = document.querySelectorAll('.last-name input, .newsletter-form-field-wrapper.field.last-name'); lnameFields.forEach(function(field) { field.style.opacity = '0'; field.style.position = 'absolute'; field.style.width = '1px'; field.style.height = '1px'; field.style.margin = '-1px'; field.style.padding = '0'; field.style.border = '0'; field.style.clip = 'rect(0,0,0,0)'; field.style.overflow = 'hidden'; if (!field.value.trim()) { field.value = 'N/A'; } }); // Replace "(required)" with an asterisk document.querySelectorAll('label, span').forEach(function(element) { if (element.textContent.includes('(required)')) { element.innerHTML = element.innerHTML.replace('(required)', '<span style="color: red;"> *</span>'); } }); // Adjust the text "First Name" to "Name" document.querySelectorAll('label').forEach(function(label) { if (label.textContent.includes('First Name')) { label.innerHTML = label.innerHTML.replace('First Name', 'Name'); } }); // Remove or hide the "Last Name" text document.querySelectorAll('label').forEach(function(label) { if (label.textContent.includes('Last Name')) { label.style.display = 'none'; } }); // Extend the "First Name" field to full width var fnameField = document.querySelector('input[type="text"]'); if (fnameField) { fnameField.style.width = '200%'; } } }); }); observer.observe(document.body, { childList: true, subtree: true }); }); </script> Thank you Squarespace and forum contributors always.

Thank you for the reply, I appreciate the help. Regrettably, this doesn't fix the issue. When I use this code instead of the first one, the url doesn't reroute at all.

Hi, I'm looking to reroute the URL link for a site title (7.1 Fluid engine). Here's the current code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script>$(document).ready(function () { $("#site-title").attr("href", "https://www.dream.industries/garden"); }); </script> It works great. One problem, it doesn't work on mobile. Not sure why. Can anyone help? Thank you in advance if so.

Wow, I'm continually impressed with this Forum and the people who keep it running. Yes, I found a web wrapper which was relatively simple and did a decent job (https://www.webtonative.com/) I may need to do something like this again in the future. I'll check out Progressier. Thank you always!

Hi Tennet, I know I'm very late to the conversation on this, but I had a similar question and found one possible workaround to the limits. Squarewebsites.org has a couple plugins which may help. Here are the links and the relevant wording on their site. https://www.squarewebsites.org/squarespace-plugins/universal-filter https://www.squarewebsites.org/squarespace-plugins/lazy-summaries " Filter Result Limit Universal Filter does NOT handle additional items loading, which means the maximum number of items you can load depends on the Block type your using (usually 20 or 30 items). Exception: is if you use Blog List pages - the filter will try to filter/load all posts once you apply Universal Filter on a Blog List page. The Solution: So if you want to load more than 30 items, you’ll have to use Universal Filter on Summary Blocks and add the Lazy Summaries plugin (this plugin raises Summary Block Limit from 30 to unlimited). If you wanna know more about collection and page limits, you can read about it here: Squarespace limits. " I can think of several instances where exceeding the limits would be extremely useful (that's why I found this post). That said, it's probably important to keep in mind that the limits are there for a reason. By stretching them, you risk the website running more slowly. Anyway, if anyone ever reads this, hope it helps. Cheers.

Wow, I feel like I've just been visited by a celebrity! Thank you so much, love your videos! You've helped me a fair amount over the last few years! Just went through every other variable I could imagine and found the glitch. The Vimeo video helped. (My CSS formatting for the calendar was not specific enough.)

Of course, thanks for looking into it. Website: www.dream.industries I've tried a few different codes, but here's one that works on another Squarespace website but seems to have no effect here. //use mobile menu on desktop// .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;} //end use mobile menu on desktop//

Hi, The goal is to use the burger menu across all devices - I've done this on other websites and it's worked just fine. However, the same CSS code that is currently working on other 7.1 websites isn't working here. I've tried a number of similar iterations of code (from this forum, insidethesquare, Bard, and Chat GPT) and none seem to have any effect. I'm confused as this seems like a common and simple modification and the site is very much in its infancy and has almost no CSS or code injection. Any help would be appreciated.

This is probably easy for some of you, but it took me awhile so I decided to share in case it might help someone else... I struggled for a couple days with the calendar portion of Squarespace - mobile formatting was the main issue, but there were other considerations as well. In searching for best overall option, I decided to see if I could use Google Calendar within a Squarespace website. It took awhile to figure some of the details out; but the things I learned are all easy to implement. 1. Embedding the calendar is simple enough; here's a tutorial: https://www.askquesty.com/post/how-to-embed-google-calendar-squarespace-tutorial. 2a. Once embedded, the next step is to wrap the code within the codeblock. Something like this works: <div class="googleCalendar"> ENTER EMBED CODE FOR CALENDAR HERE </div> 2b. Also, in the codeblock, change the width in the embedded code from width="800" to width="100%" 3. After the code is wrapped, head over to CSS and add something like this: <style> .calendar-container { position: relative; width: 100%; padding-bottom: 75%; overflow: hidden; } .calendar-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> That's it. Now you have an embedded google calendar that adjusts based on the screen size and the height doesn't collapse. It isn't perfect, but it's free, easy to use, incredibly feature-rich, and likely will be around for awhile. Hopefully this helps someone. Cheers PS. If anyone decides to make it more aesthetically pleasing or comes up with improvements to the code, please let me know

Just wanted to say thanks for your help. You guys have helped me plenty of times over the last couple years ((a few times directly, many times indirectly). For this one, I think the solution for now is simply to not make the calendar the focal point of the website. The site is still in the inception stage, so this is an easy shift. Thanks always

Thank you! I can see how an obscure font might be treated differently - much appreciated.

Site is: dream.industries. There are test dates in August. Thank you!!! - even just for looking into it!

I've been really struggling to get the mobile view of Squarespace's calendar to look right. Here are some possible solutions in order of preference. 1. Keep it simple and find a way for the calendar to format properly in mobile. Most importantly, this includes having the underline of the flyout on vertical mobile not behave like strike-through of the title. This also includes improving the functionality of the flyout on horizontal mobile to eliminate the poor user-experience of having hover effects on a click-through item on a cell phone screen. And in a perfect world, this would also include retaining the thumbnail for the calendar in all locations. One compromise on thumbnails in the vertical mobile view is changing the color of the event dates. Not ideal, but I can work with it. 2. Remove the flyout completely while still enabling the viewer to click on event days. This is a compromise. If the flyout doesn't work properly on mobile, perhaps I can just get rid of the flyout while still permitting for clickthrough when someone clicks an event date. I've found a way to get rid of the flyouts, but it also disables clickthrough for the event dates. So, that doesn't help. 3. Find a calendar plugin that is professional in quality but doesn't charge a monthly fee. I'd rather not go this route, but I'm looking to see what options are available. If anyone recommends another calendar product (that doesn't charge a large monthly fee), I'm open to it. If anyone could help, I'd be appreciative. I've spent an embarrassing amount of time spinning my wheels on this one and have nothing to show for it.

Just in case anyone else stumbles across this same issue, the closest I've found to a solution so far is this: @media screen and (max-width:640px) { td.has-event { background: gold !important; opacity: 1 !important; } - Posted by Tuanphan in one of the aforementioned listings.