Wolfsilon

Background videos for Squarespace by default will not play the audio associated with the video regardless if you have a Personal or Business account.
To get audio for a background video you will need a third-party plugin and a JavaScript customization enabled Squarespace plan, which is available for Business plans or higher.
So, if you want the option to find and install a plugin, you must have a Business plan or higher but doing so will not automatically enable any additional audio features. If that makes sense.

"Unexpected value..."
Parsing the values for your data at X,Y is screwed up. Check your array code or datasheet.

You’ve just posted a copy of what I’ve already provided so this isn’t anything new. You’re right that you can’t add script if you are on a Personal Plan, which means you won’t be able to change the audio block’s behaviour or use an alternative player. You will require a Business Plan. 

Hello guys!
@Wolfsilonthanks a lot for recommending us!
@eliblockwe do have Player widgets that are relatively easy in customization and installation. Feel welcome to try them out - and if any assistance needed, our Support Team will be always delighted to help 🙂
 
Regards,
Elfsight Team
Explore all Elfsight widgets - Widget Catalog
Follow us - Facebook | Instagram

This is most likely a relatively new issue for audio blocks. The audio blocks included by Squarespace are incredibly depreciated blocks and next to useless for modern uses in my opinion. Although, looking at your website, I do really like what you've done to customize them. My apologies if this seems rude but I'm very critical of these particular blocks and they need to be updated.
I'd recommend you raise issue with the performance to customer support and hopefully they revamp these blocks soon. Otherwise, the answer is no. On mobile, they're seen as independent files and cannot be played in the page itself. Not easily at least. I'd recommend using an external plugin or hosting them through SoundCloud. If not SoundCloud, the ElfSight audio widget is fantastic.  

I'm thinking the curse of Ajax Loading strikes again! Try turning off Ajax Loading to see if the problem goes away.
Let us know how it goes.

Thank you so much! This helped me understand how to tweak things and also solved my problem. 

Hello there!
The code to change the positioning of the text and image shown only on the page in the example above would be something like this:
#collection-6177601a56097560be5eed2e { @media only screen and (max-width: 769px){ .sqs-row:nth-child(3) { display: flex; flex-direction: column; } .sqs-row:nth-child(3) .sqs-col-4 { width: 100% !important; } } } Most of the default layouts are structured by pages (collection), sections, rows, and then columns(sqs-col-...).  In the code above, we target the page ID, then the 3rd row on the page using - :nth-child(3) - , and apply the flex-column layout to the 3rd row when the dimensions are less than 769px (tablet-size).
Because the row and the column we're targeting won't be the correct width until later (640px) on mobile devices, we apply the width increase to the column nested inside the ":nth-child(3)" row early, demonstrated on the 8-9 lines of code.
 
Hope this help,
Daniel

Hello,
Could you please also attach the password to view your private website?
Thanks

Adding a light-box will be difficult here without a plugin. Esspecially since you want to keep the aspect ratio options. I'd recommend that you consider purchasing or installing your own light-box plugin to help you do this.

Try using the following code in your Custom CSS menu:
.accordion-item__description { max-width: 100% !important; } Best,
Dan

Great, glad to hear that. Happy Coding!

Your columns appear to be evenly sized on my end. I am, however having trouble finding exactly what the issue is.
Also while I'm viewing your website, I noticed that you have some JavaScript repeatedly firing in the DOM that's significantly impacting your performance as well.
Hope that you were able to fix your initial issue. Let us know!
 
Best,
Dan

Without diving head first into re-configuring your JavaScript plugin. Your best bet is to adjust the size of the font and the dimensions of the caption container to get some wrapping to happen.
I'm assuming there are some extra plugins on this website but the script looks like it's just finding the "Alt" and adding the description to the side of your image.
--
The container for the lightbox is: .gallery-lightbox-item-wrapper
The text container is: .gallery-lightbox-caption
The element selector is: .gallery-lightbox-caption p
--
Because the script is only searching for and adding a single text element when lightbox is active, you cannot easily add a header/title to the caption.
.gallery-lightbox-item p { font-size: 4vmin; } Should change the font size but you'll need to do some other adjustments to get it wrapping the way that you want.

Hello!
I can actually see the banner bars on Desktop as well. If nobody has replied by tomorrow morning, I will take a look and help in whatever way I can. Apologies as I'm on a train and will soon lose connection.
Also, I like the message/objective here! Just finished building a non-profit website for a maternal and infant health organization in the Democratic Republic of Congo for a client recently and love what you've got going here. Let me know if there's anything I can do to help. Free of charge of course.
 
Best,
Daniel

If you haven't already, I would check to ensure that you're using a dark image logo for your Social Sharing image which will appear on social media platforms. Though, on some applications you cannot control the way the link looks or it may take extra time for the change to appear.
Navigate to the Social settings by going to: Home > Design > Social Sharing and upload your image.

If you're using 7.1 you could try a code like this:
.page-section:before { content: ""; position: absolute; right: 5px; bottom: 0; background-image: url(PNG_URL_HERE); background-size: cover; background-repeat: no-repeat; background-position: center; width: 50px; height: 50px; z-index: 1; }

Great, glad to hear that. Happy Coding!

Try using the following code in your Custom CSS menu:
.accordion-item__description { max-width: 100% !important; } Best,
Dan

This worked, thank you, Dan!! 

Hello! Welcome to the community.
First off, you're well on your way to getting you're website looking like how you imagine it and it's awesome to see that you're taking a step to learn about customizing your website.
Couple of things to keep in mind:
1) When you're editing a block or a page, or even a section of your website. You'll do most of the editing in the Home > Design > Custom CSS tab.
2) You won't need to use a code block for editing pieces of your website with CSS that could otherwise be written in the Custom CSS tab.
3) When you're editing in the Custom CSS tab -- You won't need to use <style> tags in the menu at all 🙂 You just need to follow the following format with any variation of properties:
YOUR_BLOCK/SECTION_ID_HERE { font-family: YOUR_FONT_NAME; padding: YOUR_PADDING; margin: YOUR_MARGINS; background-color: YOUR_COLORS; display: PICK_ONE_ONLY_ONE -> "Block // Flex // Inline-Block // Grid"; width: %,PX,EM,REM,VW height:%,PX,EM,REM,VH position: PICK_ONE_ONLY_ONE -> "Relative // Absolute // Fixed // Static"; font-size: %,PX,EM,REM transform: Translate (x,y), Rotate(VALUE-deg), Scale(2), so much more...; } 4) Try removing your code from the code-block and adding it to your Custom CSS menu and see if that makes a change. If not, feel free to message me or reply here with the URL and I'll do my best to clear up any confusion.
Don't give up!
 
 

Hello!
I can actually see the banner bars on Desktop as well. If nobody has replied by tomorrow morning, I will take a look and help in whatever way I can. Apologies as I'm on a train and will soon lose connection.
Also, I like the message/objective here! Just finished building a non-profit website for a maternal and infant health organization in the Democratic Republic of Congo for a client recently and love what you've got going here. Let me know if there's anything I can do to help. Free of charge of course.
 
Best,
Daniel

@media only screen and (max-width: 640px) { .section-background-content { display: none !important; } } Should disable the effect on mobile and leave you with the original replacement image code you shared above -- resulting in a static image, instead of the panning effect for the image.

Are you trying to add a background image to just one section? Adding an image using the Advanced > Code Injection isn't normally how you do this unless you have direct control on the "#outerWrapper". Meaning, the outerWrapper doesn't exist without your code. But, in my experience, I believe it's built in. I'd consider just using Custom CSS and applying the background through that menu only.
If you're saying that the code above is currently in your Custom CSS menu, you're likely running into the Syntax error because you cannot have "<style>" tags in this menu and you might just need to remove both of them and leave the innermost CSS.

Hello,
How strange, I'm not sure if this is a new issue or has always been the case when using the same "grid:simple" or template grids on the website for different portfolio pages. I would bring it to the attention of a support representative if you feel so compelled.
To make matters more strange, Squarespace's grid system is finicky and will reject standard grid CSS. Here's the code I use, just target the section that you want to have 2 columns. Be careful setting any other dimensions like spacing after inserting the code or remember to disable it when editing and adjust accordingly.  
[data-section-id="YOUR_SECTION_ID_HERE_"] { @media only screen and (min-width:640px){ .portfolio-grid-basic{ display: grid !important; grid-template-columns: repeat(2,minmax(~"250px, 1fr")) !important; } } }