awd113

Update I've managed to get to to be mostly full screen — but do now have a small white space on the left hand side I'd really like to get rid of. Same URL: https://www.sdaservices.com.au/eligibility-tool New CSS: (removed above) .fe-63cf25643bca9c323109fe00 { --sqs-site-gutter: -80px;} iframe {width: 100vw; height: 100vh;} Any advice would be greatly appreciated. Thanks 🙂

Hello, I'm trying to get an iframe to fill a full section on a page for a client website. At the moment it seems to be full width, but at a small height. I've added the below to the CSS (which made it full width), but can't seem to get the height to change. The iframe has a built in responsiveness so it changes to mobile version on small screens, so I'd like it to fill the section on both desktop and mobile. Happy for it to have some white space around if needed (as is at the moment). Page: https://www.sdaservices.com.au/eligibility-tool CSS used currently: #block-yui_3_17_2_1_1674441724084_27722 .sqs-block-content { height: 100% !important; } #block-yui_3_17_2_1_1674441724084_27722 iframe { top: 0; left: 0; height: 100% !important; width: 100% !important; } Thanks in advance 🙂 A

Hi @tuanphan, yes any advice on how to resolve this would be greatly appreciated. thanks! :)

Hi @bangank36 Thanks for your reply. I'm unfortunately unable to get this working. I've followed your steps but it doesn't appear to be working. You can see the site here (pw: 345) About page > 'Meet Our Team' section at the bottom, 3rd row down, second from the left (Deb) — I have put the 'Read More' half-way through this. Any advice you could offer would be greatly appreciated. Thanks! Andy

Hi all, Wondering if it's at all possible to add an expandable / read more button to paragraphs in Squarespace's pre-made content block/card sections (sorry not sure what these are called). I've added a screenshot below to show what I'm referring to. I'd ideally like to be able to add a read more button at the end of longer paragraphs to keep all text length consistent. As per the ones on the left — I've just done this as a text example to show what I mean. The ones on the right is how it would look without this. Open to any other ways this could be done also / any other blocks that could do this better. I know I could possibly just re-create these sections as normal text blocks and then put an accordion or something similar, but I'm just trying to keep it as simple as possible for the client to edit. Note, I haven't made the site as of yet, just planning out and used a random default template for the example below. Any advice would be greatly appreciated 🙂 Thanks! A

Hi all, An update on this. I’ve contacted Squarespace support and they’ve indicated it’s a problem with custom code, but say it may take several days to resolve. As far as I can tell all custom code to do with the cart has been removed so I’m not 100% sure what’s causing it, but I understand it’s quite complex so it’s likely I’m missing something. If anyone has any ideas in the meantime about what in the custom code could be causing this it would be very much appreciated as the site is now live and although customers can still purchase, it’s not the best experience when quantities change. Thanks again! Note - it seems this page has merged two of my threads / questions into one (one relating to scrolling which is resolved, and one relating to the cart, which is not resolved.

This issue is super confusing. I finished up yesterday removing any CSS / JS relating to the cart. Stock Squarespace standard. Loaded it again this morning and it's still having issues. The primary issues are: When adding a product, then removing it, then adding any other product adds 2 quantity. Adding any second product while there's another product in the cart adds 2 quantity. So it's completely fine if you clear cache, then go and add a single product, no problems, as soon as you do anything else to do with the cart though, it does the x2 problem. Any advice would be greatly appreciated. Thank you! :)

@paul2009 Oh sorry, I tried putting back one of the JS plugins just to see which one was the problem. My errors come back with both of them, so they're now both removed once again. Now that they're gone I'm not getting any of those red (x) errors anymore after clearing cache. Can you see any errors on your end now? If not then it's just the width of the 'Cart (0)' I need help with if you have any ideas. Thanks again for your advice, it's very appreciated.

Hi @tuanphan Oh yes sorry I removed to try something else. I've put it back in now. Just a note. This is only happening on Safari (iPhone). Chrome (iPhone) and Safari (Desktop) work fine. Thanks!

So i've gone back in and deleted all the JS relating to code as well. Now looking, it doesn't seem to have any errors. Phew! I went to put back in some of the CSS styling, just to make it look a bit nicer (keeping the JS out), and one line seems to break it. The one below. Any thoughts why this is happening / an alternative I could use? I'm using this CSS line to change the cart to a single line rather than going over 2: From: Cart (0) To: Cart (0) .icon-cart-quantity {min-width: 10em;}

Hi Paul, thanks for your comment. I'm not exactly sure what you mean by this sorry. Is this referring to the plugins I have installed or the CSS? And are you suggesting this could be causing the problem with the cart? Thanks again.

Hi all, I'm having some issues with the quantities that get added to cart / show when user visits the site for the first time. Sometimes it shows '1' but the card is empty, sometimes it adds 2-3, but the user has only added one. Just all kinds of strange things. This issue happens on both mobile and desktop, but much more common on mobile. (note, i've tried clearing cache, different browsers, private mode etc. — all the same problem.) BUT, when I remove all the custom CSS that relates to the cart, it works fine. So clearly this is something i've done incorrectly. I've included the CSS below, can anyone provide any insight into why this particular CSS breaks this? As far as I can tell it's all font styling and adding some '(' ')', but maybe i'm just misunderstaning how all this works. Worse case scenario, I can go back to the standard cart icon, but would love to use our custom look if possible. Thanks in advance! Site Here (pw:aUdio5) (note, the cart is hidden on desktop until something is added to it) /*cart-desktop*/ svg.icon.icon--cart { visibility: hidden;} @media screen and (max-width:767px){ .icon-cart-quantity:before { content: "Cart"; font-family: youth-reg; font-size: 1.2rem; color: #AA7850; font-feature-settings: 'ss02' on; } .header-actions-action--cart {position: fixed; top:4vh; left: 13vw;} .icon-cart-quantity {min-width: 10em;} .sqs-cart-quantity { font-family: youth-reg; font-size: 1.3rem; color: #AA7850; font-feature-settings: 'ss02' on;} .sqs-cart-quantity:after { content: ')'; font-family: youth-reg; font-size: 1.3rem; color: #AA7850; font-feature-settings: 'ss02' on; } .sqs-cart-quantity:before { content: '('; font-family: youth-reg; font-size: 1.3rem; color: #AA7850; font-feature-settings: 'ss02' on; } } /*cart-mobile*/ @media screen and (min-width:767px){ .icon-cart-quantity:before { content: "Cart"; font-family: youth-reg; font-size: 1.0rem; color: #AA7850; font-feature-settings: 'ss02' on; } .header-actions-action--cart {position: fixed; top:2.2vw; right: 5vw;} .icon-cart-quantity {min-width: 10em;} .sqs-cart-quantity { font-family: youth-reg; font-size: 1.0rem; color: #AA7850; font-feature-settings: 'ss02' on;} .sqs-cart-quantity:after { content: ')'; font-family: youth-reg; font-size: 1.0rem; color: #AA7850; font-feature-settings: 'ss02' on; } .sqs-cart-quantity:before { content: '('; font-family: youth-reg; font-size: 1.0rem; color: #AA7850; font-feature-settings: 'ss02' on; } }

Hi there, I've recently added some code to a website I'm working on to disable scroll on the homepage to allow for a single 100vh page only. This works perfectly on desktop, but on mobile, it is a bit glitchy. It works for the first swipe down, but then if you try again it sort of stutters down and allows you to go past. I've achieved this by adding the following to the header injection of this page only. <style>html, body {margin: 0; height: 100vh !important; overflow: hidden}</style> If anyone has any idea why this doesn't seem to be working on mobile, please let me know 🙂 Happy to try other solutions if this method isn't best practice. Thank you! Website Link (pw - aUdio5)

Perfect, that works great, thanks so much! 😀

@tuanphan Amazing, thank you so much!!! Really appreciate it. Any chance you'd know why (on the previously broken pages) it sits strangely? Almost like the height is pushing too far or something. Screenshot Left: Previously broken page Right: Correct page

Update. After hours of looking through all this code that I don't really understand (learning a lot though!), I found a couple of lines that are different between the two. Other than these 'preSlide' lines of code, the two instances are exactly the same. In the Chrome inspector (shown in screenshot below), if I remove these 2 instances of the 'preSlide' text (show in pink) on the page that's not working, it fixes the problem perfectly, so it must be this. Could anyone provide any insight into why the one that's not working has these 'preSlide' lines and how I could go about removing them as I don't have access to the HTML to edit like I can in Chrome. Also, just a note, the 'preSlide' highlighted in green does appear in both and doesn't seem to have any effect on things. Any advice would be amazing — feels like I'm so close to solving, but just not sure how to do this last step. Thanks in advance 🙂

Hi all, Another question, this time regarding a plugin being strangely inconsistent. Not sure if it can be answered here, but it's quite urgent (site is launching over the next day), so thought I might get a quicker response here than sending an email to the plug-in maker (which i'll do as well). So — I'm using a plugin that creates a custom slide out section (I'm using it as a menu). You do this by creating a second section in the footer of any page, and it uses that section as the content for the slideout. Of course there's some JS i've put in the advanced>page injection as well. The issue is, for some reason it doesn't work on every page, even though the footer should be the same site-wide. It works on most pages, except a few random ones. These pages are all the same type of pages (just plain pages with sections and blocks), so i'm a bit lost to why it's doing this. I even tried duplicating one of the pages that is working and re-inputing the content to match the one that's not working. It still has the problem though! I've included some screenshots below with an example of it working, and one with it not working, as well as a screenshot of where it is in the edit screen. Also a link to plugin used Any advice or thoughts on why this is happening would be greatly appreciated. Thanks in advance!

Amazing, that worked great, thank you @tuanphan!

Hi, I'm having trouble with some strange margins happening on my sites footer. I'm using a plugin for a menu overlay that is built in the footer, so suspect it might be something to do with that. Although I can't find anything obvious. At the moment there's 5-10% margin on each side of the footer content. I'd like it to match the rest of the site and have 0 (just the 1.5 padding). Site (Edit Removed) Any advice would be greatly appreciated. Thanks in advance!

Hi @tuanphan and @creedon thanks for the information here. Appreciate your time. I'm happy to re-build / try another way if you think there's a better option? If not I might have to look into some other accordion options. I may be way off here (limited knowledge), but is there anyway to put a html table into the accordion? I have previously used those in Squarespace and they've scaled responsively quite well, but just not sure how to insert one here. Thanks again.

Hi — some great options in this thread, thanks to @tuanphan and everyone who's contributed. However I do need some advice on how to stop the formatting going strange when the text on double columns goes over two lines. Sometimes even swaps the order around and puts second column text down the bottom of the first. Mainly happen on mobile. I don't mind text going over two lines, just want it to align with the top of the left column content to the top of the right column content. Hope that makes sense — I've attached some screenshots below (left correct / right incorrect) (Edit Removed). Website (Edit Removed). Seems to happen on both desktop or mobile, but mobile is worse as there's lots more 2 rows.

Hi Paul. Thanks so much for your comment and advice. Would you (or anyone else that is reading this) have any idea what kind of scaling Squarespace is applying to their font styles? I've tried using various units (em, rem, vh, vw etc.), but doesn't seem to match. I managed to find this: font-size: calc((4.5 - 1) * 1.2vw + 1rem); Which made me hopeful, but even that seems to change when you resize the browser, so I figure their must be something else going on? Any further advice or ideas would be greatly appreciated. Thanks!

Hi! I'm wondering if instead of changing a font size/style in CSS you can tell it to reference one of the already set heading / paragraph styles? Eg. let's say your H1 is already set to 5rem in the built-in font size selection, but you want to make an element that doesn't have the ability to be changed in those settings reference that style. Eg. instead of doing this: .form-submission-text {font size: 5rem;} You can just tell the .form-submission-text to use H1. I know you could simply match the details of the style, but I've noticed that it then doesn't have the flexible / responsive properties that text set with in-built styles does. If there's not a way to reference the style, perhaps there's a way to tell that text to scale like the built-in styles? Hope I'm making sense — I come from a design background so i'm a little out of my depth. Thanks in advance! 😀