Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by AJZ

  1. I had the same issue. Here's what worked for me. Be well.
  2. 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.
  3. 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.
  4. 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.
  5. 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!
  6. 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.
  7. 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.)
  8. 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//
  9. 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.
  10. 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
  11. 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
  12. Thank you! I can see how an obscure font might be treated differently - much appreciated.
  13. Site is: dream.industries. There are test dates in August. Thank you!!! - even just for looking into it!
  14. 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.
  15. 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.
  16. When pulling events to a calendar, the corresponding events image displays on the proper date on the calendar. This works on both desktop and horizontal mobile view. However, in vertical mobile view (very possibly the most common way things are viewed these days), the image no longer appears. It seems I'm not the first one to struggle with this issue as I found the following threads... However, I was unable to find a solution. Can anyone help?
  17. SOLVED - NO NEED FOR RESPONSES - THANK YOU!!! When editing a specific website on Squarespace, both desktop and mobile versions seem to format properly. However, if I check the site on my phone, only the desktop version appears. I don't understand why the site seems to have both versions (desktop and mobile) when editing but only has the one version (desktop) in real-world practice. I began the site before fluid engine and only recently began implementing the upgrade, perhaps this has something to do with it?? If anyone can help, I would appreciate it. Thank you.
  18. If I click the navigation burger, the navigation window takes up the screen. Is it possible to have a link which directs to the navigation itself? If you help, thanks in advance.
  19. Hi. So the website I'm working on is relatively simple, but text heavy with tons of anchor links. I'm looking into converting it into an application, but it's a little tricky navigating the options. Does anyone have a recommendation? Thank you in advance.
  20. Site URL: http://www.made4healing.com Hello, I successfully used code from this post: It works great. The only trick is that it undoes the inner shadow css. .grid-image-inner-wrapper:before { box-shadow: inset 3px 3px 12px rgba(0,0,0,.1)!important; transition: all .2s linear; } Is it possible to add an inner shadow while still using this code? /* Portfolio hover */ .portfolio-text { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; z-index: 10000; opacity: 0; } a.grid-item { position: relative; } .grid-item:hover .portfolio-text { opacity: 1; } .grid-image-inner-wrapper:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; } .portfolio-text * { color: white !important; } .grid-item:hover .grid-image-inner-wrapper:after { opacity: 1; } If you can help, thank you in advance!!!
  21. I appreciate you looking into it! The password is now set to: Thank_You_bangank36 Webite is www.made4helpers.com. I've placed a portfolio grid as the only page for your convenience.
  22. Site URL: http://www.made4helpers.com Hi, I have a grid-style portfolio page and am hoping to round the edges. I'm pretty sure the border-radius css command is correct, but I'm struggling to determine how to get it to apply to the grid. Any advice?
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.